:root {
  --brand: #0f766e;
  --brand-600: #0d9488;
  --brand-50: #f0fdfa;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --danger: #dc2626;
  --warn: #b45309;
  --ok: #15803d;
  --radius: 14px;
  --brand-700: #115e59;
  --brand-100: #ccfbf1;
  --heading: var(--ink);
  --link: var(--brand);
  --surface: #ffffff;
  --footer-bg: linear-gradient(135deg, #3b1d55, #2a1340, #1c0b2e);
  --footer-bg-solid: #2a1340;
  --footer-text: #cbd5e1;
  --btn-radius: 999px;
  --font-size: 16px;
  --line-height: 1.65;
  --heading-weight: 700;
  --h-scale: 1;
  --shadow: 0 1px 2px rgb(15 23 42 / .06), 0 4px 16px rgb(15 23 42 / .06);
  --body-bg: #f1f5f9;
  --container-w: 80%;
  --container-max: 100vw;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --heading-font: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: var(--font-size)/var(--line-height) var(--font); color: var(--ink); background: var(--bg); text-rendering: optimizeLegibility; }
body:not(.admin) { background: var(--body-bg, var(--bg)); }
main#main { background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .6em; font-family: var(--heading-font); font-weight: var(--heading-weight); color: var(--heading); }
h1 { font-size: calc(clamp(2rem, 4.5vw, 3.2rem) * var(--h-scale)); }
h2 { font-size: calc(clamp(1.4rem, 2.6vw, 2rem) * var(--h-scale)); }
h3 { font-size: calc(1.15rem * var(--h-scale)); }
.fa-solid, .fa-regular, .fa-brands { line-height: 1; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

.container { width: calc(100% - 2rem); margin-inline: auto; }
@media (min-width: 961px) { .container { width: min(var(--container-w), var(--container-max)); } }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-size: .875em; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--brand); margin-bottom: .5rem; }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-2); max-width: 62ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.3rem; border-radius: var(--btn-radius); border: 1.5px solid var(--brand); background: var(--brand); color: #fff; font: 600 .95rem/1 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .5rem .9rem; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-50); color: var(--brand); }
.btn-light { background: #fff; color: var(--brand); border-color: #fff; }
.btn-light:hover { background: var(--brand-50); color: var(--brand); }
.btn-danger { background: transparent; color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; color: var(--danger); border-color: var(--danger); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
form.inline { display: inline; }

:root {
  --nav-h: 68px; --nav-font: 15px; --nav-logo: 34px;
  --nav-bg: rgb(255 255 255 / .9); --nav-bg-solid: #fff; --nav-text: #334155; --nav-accent: #0f766e;
  --nav-cta-bg: #0f766e; --nav-cta-text: #fff; --nav-radius: 18px; --nav-offset: 0px; --nav-total: 68px;
}
.site-header { position: relative; z-index: 50; background: var(--nav-bg); color: var(--nav-text); font-size: var(--nav-font); transition: background-color .25s, box-shadow .25s, transform .3s, border-color .25s; }
.site-header.nav-sticky { position: sticky; top: 0; }
.site-header.nav-border { border-bottom: 1px solid var(--line); }
.site-header.nav-blur { backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); }
.site-header.nav-shadow-sm { box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 6px 18px -8px rgb(15 23 42 / .14); }
.site-header.nav-shadow-lg { box-shadow: 0 2px 4px rgb(15 23 42 / .06), 0 18px 40px -12px rgb(15 23 42 / .28); }

.nav-bar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: 1rem; }
.nav-w-wide .nav-bar { width: min(100% - 2rem, 1440px); }
.nav-w-full .nav-bar { width: calc(100% - 2.5rem); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; }
.site-header .brand { color: var(--nav-text); font-size: calc(var(--nav-font) * 1.15); flex: none; }
.site-header .brand:hover { color: var(--nav-text); }
.site-header .brand-mark { width: var(--nav-logo); height: var(--nav-logo); border-radius: calc(var(--nav-logo) * .3); background: var(--nav-accent); font-size: calc(var(--nav-logo) * .45); }
.brand-logo { height: var(--nav-logo); width: auto; max-width: 220px; object-fit: contain; }
.brand-logo-mini { display: none; height: var(--nav-logo-mini, 28px); }
.site-header.is-scrolled .has-mini .brand-logo-full, .site-header.is-scrolled .has-mini .brand-mark { display: none; }
.site-header.is-scrolled .has-mini .brand-logo-mini { display: block; }

.site-nav ul { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.site-nav a:not(.btn) { display: block; padding: .5rem .8rem; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-nav a:not(.btn):hover { background: var(--bg-alt); color: var(--ink); }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--brand); background: var(--brand-50); }
.site-header .site-nav { display: flex; align-items: center; gap: .75rem; flex: 1; justify-content: flex-end; }
.site-header .site-nav a:not(.btn) { color: var(--nav-text); }
.site-header .site-nav a:not(.btn):hover { color: var(--nav-accent); background: color-mix(in srgb, var(--nav-text) 8%, transparent); }
.site-header .site-nav a[aria-current="page"]:not(.btn) { color: var(--nav-accent); background: color-mix(in srgb, var(--nav-accent) 12%, transparent); }
.nav-align-left .site-nav .nav-menu { flex: 1; justify-content: flex-start; margin-left: 1rem; }
.nav-align-center .site-nav .nav-menu { flex: 1; justify-content: center; }
.nav-cta { flex: none; background: var(--nav-cta-bg); border-color: var(--nav-cta-bg); color: var(--nav-cta-text); }
.nav-cta:hover { background: color-mix(in srgb, var(--nav-cta-bg) 85%, #000); border-color: color-mix(in srgb, var(--nav-cta-bg) 85%, #000); color: var(--nav-cta-text); }
.nav-cta.is-hidden { display: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: .4rem; color: var(--ink); cursor: pointer; }
.site-header .nav-toggle { color: var(--nav-text); border-color: color-mix(in srgb, var(--nav-text) 22%, transparent); }

.site-header.nav-floating { background: transparent; border-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: var(--nav-offset); pointer-events: none; }
.nav-floating .nav-bar { pointer-events: auto; background: var(--nav-bg); border-radius: var(--nav-radius); padding-inline: 1rem .6rem; transition: background-color .25s, box-shadow .25s; }
.nav-floating.nav-w-full .nav-bar { width: calc(100% - var(--nav-offset) * 2); }
.nav-floating.nav-border .nav-bar { border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.nav-floating.nav-blur .nav-bar { backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); }
.nav-floating.nav-shadow-sm .nav-bar { box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 8px 24px -10px rgb(15 23 42 / .18); }
.nav-floating.nav-shadow-lg .nav-bar { box-shadow: 0 2px 6px rgb(15 23 42 / .06), 0 22px 48px -16px rgb(15 23 42 / .32); }
.nav-floating:not(.nav-shadow-sm):not(.nav-shadow-lg) .nav-bar { box-shadow: 0 1px 2px rgb(15 23 42 / .04); }

.site-header.nav-glass:not(.is-scrolled) { --nav-bg: var(--nav-bg-solid); }
.site-header.nav-glass.is-scrolled { --nav-bg: var(--nav-glass-bg); }
.site-header.nav-glass.is-scrolled:not(.nav-floating) { backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px); border-bottom-color: rgb(255 255 255 / .35); }
.nav-glass.nav-floating.is-scrolled .nav-bar { backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px); border-color: rgb(255 255 255 / .4); }
.site-header.nav-glass .nav-bar { transition: background-color .3s, backdrop-filter .3s, border-color .3s; }

.site-header.nav-overlay { margin-bottom: calc(-1 * var(--nav-total)); }
.nav-overlay + main > :first-child:not(.builder-page) { padding-top: calc(var(--nav-total) + 2.5rem); }
.nav-overlay + main > .builder-page > .b:first-child:not(.b-slider) { padding-top: calc(var(--nav-total) + var(--first-pad, 4rem)) !important; }
.site-header.nav-transparent:not(.is-scrolled):not(.nav-floating),
.nav-transparent.nav-floating:not(.is-scrolled) .nav-bar { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.nav-autohide.is-hidden { transform: translateY(calc(-100% - 8px)); }
.site-header.nav-autohide.is-hidden:focus-within { transform: none; }

@media (max-width: 860px) {
  .nav-toggle, .site-header .nav-toggle { display: inline-flex; }
  .site-header .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; background: var(--nav-bg-solid); border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: var(--shadow); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .75rem 1rem 1rem; }
  .nav-floating .site-nav { top: calc(100% + 8px); border-radius: var(--nav-radius); }
  .site-header .site-nav.open { display: flex; }
  .site-header .site-nav ul { flex-direction: column; align-items: stretch; margin: 0; }
  .site-header .nav-cta { margin-top: .5rem; }
}

.hero { padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(3.5rem, 8vw, 6rem); background: radial-gradient(1200px 500px at 85% -10%, var(--brand-100) 0%, transparent 60%), linear-gradient(180deg, var(--brand-50), var(--bg)); }
.hero h1 { max-width: 18ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.page-hero { padding: 3rem 0 2.25rem; background: linear-gradient(180deg, var(--brand-50), var(--bg)); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-top: .5rem; }
.title-icon { font-size: .9em; }
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.about-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; }
@media (max-width: 760px) { .about-split { grid-template-columns: 1fr; } }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; font-size: .875rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.breadcrumb a { color: var(--muted); }

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card h3 { margin-bottom: .4rem; }
.card h3 a { color: var(--heading); text-decoration: none; }
.card p { color: var(--ink-2); margin-bottom: 0; }
.card-body { padding: 1.25rem 1.35rem 1.4rem; }
.stretched::after { content: ""; position: absolute; inset: 0; }
.service-card, .post-card, .project-card { transition: transform .2s, box-shadow .2s; }
.service-card:hover, .post-card:hover, .project-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgb(15 23 42 / .1); }
.service-card { padding: 1.5rem; }
.service-icon { font-size: 1.5rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); border-radius: 14px; margin-bottom: 1rem; }
.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-alt); }
.cover-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-100), var(--brand)); color: #fff; font-size: 2.5rem; font-weight: 800; }
.hero-cover { border-radius: var(--radius); margin-bottom: 2rem; aspect-ratio: 16 / 8; }
.empty { padding: 2.5rem; text-align: center; color: var(--muted); }

.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }

.prose { font-size: 1.075rem; color: var(--ink-2); }
.prose h2 { margin-top: 2em; color: var(--ink); }
.prose h3 { margin-top: 1.6em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose img { border-radius: 10px; margin: 1.5em 0; }
.prose blockquote { margin: 1.5em 0; padding: .5em 1.2em; border-left: 4px solid var(--brand); background: var(--brand-50); border-radius: 0 10px 10px 0; color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--bg-alt); padding: .1em .35em; border-radius: 5px; border: 1px solid var(--line); }
.prose pre { background: var(--ink); color: #e2e8f0; padding: 1rem 1.2rem; border-radius: 10px; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.meta { color: var(--muted); }
.back { margin-top: 3rem; }
.project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.project-meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.project-meta dd { margin: 0; font-weight: 600; }

.cta-band { background: linear-gradient(120deg, var(--brand), var(--brand-700)); color: #fff; padding: 3.5rem 0; }
.cta-band :is(h2, p) { color: inherit; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band h2 { margin-bottom: .3rem; }
.cta-band p { margin: 0; opacity: .85; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info dl div { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.contact-info dt .fa-solid, .contact-info dt .fa-brands { color: var(--brand); width: 1.2em; }
.contact-info dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-info dd { margin: .15rem 0 0; font-weight: 500; white-space: pre-line; }
.error-page { padding: 6rem 0; }
.error-code { font-size: 5rem; font-weight: 800; color: var(--brand); line-height: 1; margin-bottom: .5rem; }

.form { padding: 1.5rem; display: grid; gap: 1rem; }
.form h2 { font-size: 1.05rem; margin: 0; }
.field { display: grid; gap: .35rem; }
.field > span, .field > label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
input:not([type="checkbox"]):not([type="file"]), select, textarea { width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgb(13 148 136 / .15); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
textarea { resize: vertical; min-height: 6rem; }
textarea.mono { font-family: var(--mono); font-size: .9rem; line-height: 1.6; }
.field-error { color: var(--danger); font-size: .85rem; margin: 0; }
.help { color: var(--muted); font-size: .8rem; }
.field-check label { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { padding: .8rem 1rem; border-radius: 10px; background: var(--bg-alt); }
.form-status.ok { background: #dcfce7; color: var(--ok); }
.form-status.error { background: #fee2e2; color: var(--danger); }

.pre-line { white-space: pre-line; }
.b { position: relative; }
.b-full { width: calc(100% - 2rem); margin-inline: auto; }
.b-edge { width: 100%; }
.b-narrow { max-width: 760px; }
@media (min-width: 961px) { .builder-page .container { width: min(var(--page-width, var(--container-w)), var(--container-max)); } }
.b-wide { width: min(100% - 2rem, max(1440px, var(--page-width, var(--container-w)))); }
.b > .b-inner > :last-child { margin-bottom: 0; }
.has-color :is(h1, h2, h3, h4, p, li, .lead, .eyebrow, .prose, .prose h2, .prose h3, blockquote, figcaption, .section-head a) { color: inherit; }
.on-dark { color: #fff; }
.on-dark :is(h1, h2, h3, p, .lead, .eyebrow) { color: inherit; }
.b-hero-default { background: radial-gradient(1200px 500px at 85% -10%, var(--brand-100) 0%, transparent 60%), linear-gradient(180deg, var(--brand-50), var(--bg)); }
.b-hero { display: flex; align-items: center; }
.b-hero h1 { max-width: 18ch; }
.b-hero.has-color .lead, .on-dark .lead { opacity: .9; }
.align-center :is(h1, .lead, .b-intro) { margin-inline: auto; }
.align-center :is(.hero-actions, .section-head, .b-cta-inner) { justify-content: center; }
.align-center .b-cta-inner { flex-direction: column; }
.align-right :is(h1, .lead, .b-intro) { margin-left: auto; }
.align-right :is(.hero-actions, .section-head, .b-cta-inner) { justify-content: flex-end; }
.b-cta-default { background: linear-gradient(120deg, var(--brand), var(--brand-700)); color: #fff; }
.b-cta-default :is(h2, p) { color: inherit; }
.b-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.b-cta-inner h2 { margin-bottom: .3rem; }
.b-cta-inner p { margin: 0; opacity: .85; }
.b-h { margin-bottom: .3em; }
.b-h-sm { font-size: 1.25rem; }
.b-h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.b-h-lg { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
.b-h-xl { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.b-intro { margin-bottom: 1.75rem; }
.section-head + .b-intro { margin-top: -1rem; }
.b-grid { display: grid; gap: 1.25rem; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .b-grid.cols-2, .b-grid.cols-3, .b-grid.cols-4 { grid-template-columns: 1fr; } }
.b-feature h3 { margin-bottom: .35rem; }
.b-feature .service-icon { margin-bottom: .75rem; }
.b-stat { display: grid; gap: .2rem; justify-items: inherit; }
.b-stat-icon { font-size: 1.6rem; color: var(--brand); margin-bottom: .35rem; }
.has-color .b-stat-icon { color: inherit; }
.b-stat strong { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; color: var(--brand); }
.has-color .b-stat strong { color: inherit; }
.b-stat span { color: var(--muted); font-weight: 600; }
.has-color .b-stat span { color: inherit; opacity: .8; }
.b-figure { margin: 0 auto; max-width: var(--img-max, 100%); }
.b-figure img { width: 100%; }
.b-figure img.rounded { border-radius: var(--radius); }
.b-figure img.shadowed { box-shadow: 0 18px 40px -16px rgb(15 23 42 / .35); }
.b-figure figcaption { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.b-btn-wrap { margin: 0; }
.b-button .btn:not(.btn-ghost):not(.btn-light) { background: var(--btn-color, var(--brand)); border-color: var(--btn-color, var(--brand)); }
.b-button .btn-ghost { color: var(--btn-color, var(--brand)); border-color: var(--btn-color, var(--brand)); }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.05rem; }
.b-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.b-quote { margin: 0 auto; max-width: 760px; text-align: center; }
.b-quote blockquote { margin: 0 0 1rem; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; font-weight: 500; color: var(--heading); }
.b-quote blockquote::before { content: "\f10d"; font: var(--fa-font-solid, 900 1em "Font Awesome 6 Free"); display: block; font-size: 2rem; line-height: 1; color: var(--brand); margin-bottom: .75rem; }
.b-quote figcaption { display: grid; gap: .1rem; }
.b-quote figcaption span { color: var(--muted); font-size: .9rem; }
.b-divider { border: 0; border-top: 1px var(--divider-style, solid) var(--divider-color, var(--line)); margin: 0; }
.b-placeholder { padding: 2rem; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: 12px; margin: 0; }
.b .section-head h2 { margin: 0; }
@media (max-width: 760px) { .hide-mobile { display: none !important; } }
@media (min-width: 761px) { .hide-desktop { display: none !important; } }

.b-slider { position: relative; overflow: hidden; color: #fff; min-height: var(--slider-h, 80vh); display: grid; background: var(--ink); }
.b-slider .b-slides { display: grid; min-height: inherit; }
.b-slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; min-height: var(--slider-h, 80vh); padding: calc(var(--nav-total) * .5 + 3rem) 0 5rem; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s, transform .7s cubic-bezier(.4, 0, .2, 1); }
.b-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.fx-slide .b-slide { opacity: 1; visibility: visible; transform: translateX(100%); }
.fx-slide .b-slide.is-before { transform: translateX(-100%); }
.fx-slide .b-slide.is-active { transform: none; }
.b-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-slide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / calc(var(--overlay, .45) + .1)), rgb(0 0 0 / var(--overlay, .45))); }
.b-slide:not(:has(.b-slide-bg)) .b-slide-shade { background: linear-gradient(120deg, var(--brand-700), var(--brand)); }
.is-image-only .b-slide:not(:has(.b-slide-bg)) { background: linear-gradient(120deg, var(--brand-700), var(--brand)); }
.b-slide-content { position: relative; z-index: 1; }
.b-slide-content :is(h1, h2, p, .lead, .eyebrow) { color: inherit; }
.b-slide-title { font-size: calc(clamp(2rem, 5vw, 3.6rem) * var(--h-scale)); max-width: 18ch; }
.b-slide .lead { max-width: 60ch; opacity: .92; }
.b-slide .btn-light { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .7); color: #fff; }
.b-slide .btn-light:hover { background: #fff; color: var(--ink); }
.content-center .b-slide-content { text-align: center; }
.content-center :is(.b-slide-title, .lead) { margin-inline: auto; }
.content-center .hero-actions { justify-content: center; }
.content-right .b-slide-content { text-align: right; }
.content-right :is(.b-slide-title, .lead) { margin-left: auto; }
.content-right .hero-actions { justify-content: flex-end; }
.b-slider-arrow { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .35); border-radius: 50%; background: rgb(0 0 0 / .25); color: #fff; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; }
.b-slider-arrow:hover { background: rgb(0 0 0 / .5); }
.b-slider-arrow.prev { left: clamp(.5rem, 2vw, 1.5rem); }
.b-slider-arrow.next { right: clamp(.5rem, 2vw, 1.5rem); }
.b-slider-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.5rem; display: flex; justify-content: center; gap: .5rem; }
.b-slider-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .45); cursor: pointer; transition: width .3s, background .3s; }
.b-slider-dots button[aria-current="true"] { width: 28px; background: #fff; }
@media (max-width: 600px) { .b-slider-arrow { display: none; } }

.b-form-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .b-form-grid { grid-template-columns: 1fr; } }
.b-form-solo { max-width: 760px; margin-inline: auto; }
.b-form-solo > .lead { margin-bottom: 1.5rem; }
.b-contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.b-contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.b-contact-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand); font-size: 1rem; }
.b-contact-list span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.b-contact-list strong { font-weight: 600; white-space: pre-line; }
.has-color .b-contact-list span { color: inherit; opacity: .75; }

.pg-no-header .site-header, .pg-no-footer .site-footer, .pg-no-wa .chat { display: none; }
.pg-no-header .nav-overlay + main > .builder-page > .b:first-child:not(.b-slider) { padding-top: var(--first-pad, 4rem) !important; }
.pg-no-header { --nav-total: 0px; }

.cms-admin-bar { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: #0f172a; box-shadow: 0 10px 30px rgb(15 23 42 / .35); font: 600 .85rem/1 system-ui, sans-serif; }
.cms-admin-bar a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .9rem; border-radius: 999px; color: #e2e8f0; text-decoration: none; }
.cms-admin-bar a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.cms-admin-bar a.is-primary { background: var(--brand); color: #fff; }
.cms-admin-bar a.is-primary:hover { background: var(--brand-600); }
.cms-admin-bar .cms-user { padding: 0 .7rem 0 .5rem; color: #94a3b8; font-weight: 500; }
@media (max-width: 600px) { .cms-admin-bar .cms-user, .cms-admin-bar .cms-label-sm { display: none; } }

:root { --footer-link: color-mix(in srgb, var(--footer-text) 70%, #fff); --footer-pad: 56px; }
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--footer-pad) 0 1.5rem; margin-top: 0; }
.site-footer a { color: var(--footer-link); text-decoration: none; }
.site-footer a:hover { color: color-mix(in srgb, var(--footer-link) 70%, #fff); text-decoration: underline; }
.site-footer .brand { color: color-mix(in srgb, var(--footer-text) 25%, #fff); margin-bottom: 1rem; }
.site-footer .muted { color: color-mix(in srgb, var(--footer-text) 75%, var(--footer-bg-solid)); }
.footer-contact p { display: flex; gap: .6rem; align-items: baseline; }
.footer-contact .fi { width: 1em; flex: none; opacity: .7; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--footer-text) 12%, transparent); font-size: 1.05rem; }
.social a:hover { background: var(--brand); color: #fff; text-decoration: none; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.footer-col { flex: 1 1 200px; min-width: 0; }
.footer-brand { flex-grow: 2; }
.footer-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--footer-text) 75%, var(--footer-bg-solid)); font-family: var(--font); margin-bottom: 1rem; }
.footer-links, .social { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.social:empty, .footer-contact:not(:has(p)) { display: none; }
.footer-contact { font-style: normal; white-space: pre-line; }
.footer-contact p { margin: 0 0 .5rem; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid color-mix(in srgb, var(--footer-text) 15%, transparent); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .85rem; color: color-mix(in srgb, var(--footer-text) 75%, var(--footer-bg-solid)); }
.footer-bottom p { margin: 0; }
.ft-hide-brand .footer-brand, .ft-hide-links .footer-links-col, .ft-hide-contact .footer-contact-col, .ft-hide-social .social, .ft-hide-feeds .footer-feeds { display: none; }
.ft-hide-brand.ft-hide-links.ft-hide-contact .footer-grid { display: none; }
.ft-hide-brand.ft-hide-links.ft-hide-contact .footer-bottom { margin-top: 0; border-top: 0; padding-top: 0; }
.ft-center { text-align: center; }
.ft-center .footer-grid { flex-direction: column; align-items: center; }
.ft-center .footer-col { flex: none; width: min(100%, 640px); }
.ft-center .social, .ft-center .footer-bottom { justify-content: center; }
.ft-center .footer-links { justify-content: center; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.ft-center .footer-contact p { justify-content: center; }

body.admin {
  --gap: 16px;
  --float-radius: 22px;
  --float-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -6px rgb(15 23 42 / .10), 0 24px 48px -24px rgb(15 23 42 / .14);
  --float-shadow-hover: 0 2px 4px rgb(15 23 42 / .05), 0 14px 32px -8px rgb(15 23 42 / .16), 0 32px 64px -28px rgb(15 23 42 / .2);
  --glass: rgb(255 255 255 / .78);
  background:
    radial-gradient(900px 520px at 100% -10%, rgb(13 148 136 / .10), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgb(42 120 214 / .08), transparent 60%),
    #eef2f6;
  background-attachment: fixed;
}
.admin .card { border: 1px solid rgb(255 255 255 / .7); border-radius: var(--float-radius); box-shadow: var(--float-shadow); }
.float-panel { border-radius: var(--float-radius); box-shadow: var(--float-shadow); }

.admin-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--gap); padding: var(--gap); min-height: 100vh; align-items: start; }
.admin-side { background: linear-gradient(180deg, rgb(15 118 110 / .82), rgb(19 78 74 / .92)), url(/assets/sidebar-bg.jpg) center / cover no-repeat; color: #fff; padding: 1.1rem .8rem; position: sticky; top: var(--gap); height: calc(100vh - var(--gap) * 2); display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #14b8a6 transparent; }
.admin-brand { color: #fff; padding: .2rem .5rem; gap: .7rem; }
.admin-brand.has-logo { padding: .5rem .5rem .3rem; justify-content: flex-start; align-self: flex-start; }
.admin-logo { display: block; width: 100%; height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
.brand-name { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.admin-nav { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 1rem; }
.admin-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
.admin-side .nav-section { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #99f6e4; padding: .9rem .8rem .35rem; }
.admin .admin-nav a:not(.btn), .admin-side .side-link { display: flex; align-items: center; gap: .7rem; padding: .58rem .8rem; border-radius: 12px; color: #fff; font-weight: 500; font-size: .93rem; text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.admin .admin-nav a:not(.btn):hover, .admin-side .side-link:hover { background: rgb(255 255 255 / .12); color: #fff; }
.admin .admin-nav a[aria-current="page"]:not(.btn) { background: #14b8a6; color: #fff; box-shadow: 0 8px 20px -8px rgb(20 184 166 / .8); }
.nav-icon { flex: none; opacity: .9; width: 20px; text-align: center; font-size: 1rem; }
.icon-btn .nav-icon { font-size: 1.05rem; }
.icon-field { display: flex; gap: .6rem; align-items: center; }
.icon-preview { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-size: 1.25rem; }
.admin-nav .badge { margin-left: auto; }
.admin-side-foot { display: grid; gap: 2px; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / .08); }
.admin-side-foot a, .admin-side .side-link { color: #99f6e4 !important; }
.side-link { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }

.admin-main { min-width: 0; padding: 0 clamp(.25rem, 1.5vw, 1rem) 5rem; }
.admin-topbar { position: sticky; top: var(--gap); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .6rem .55rem 1.2rem; margin-bottom: 1.6rem; background: var(--glass); backdrop-filter: saturate(1.8) blur(14px); -webkit-backdrop-filter: saturate(1.8) blur(14px); border: 1px solid rgb(255 255 255 / .8); }
.topbar-trail { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .92rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.topbar-trail .muted { overflow: hidden; text-overflow: ellipsis; }
.topbar-trail .sep { color: var(--line); }
.topbar-actions { display: flex; align-items: center; gap: .35rem; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink-2); transition: background .15s, color .15s; }
.icon-btn:hover { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.dot-badge { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
.user-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .3rem; margin-left: .25rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: var(--shadow); }
.user-chip:hover { color: var(--brand); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), #115e59); color: #fff; font-weight: 800; font-size: .85rem; }

.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin-head h1 { font-size: 1.75rem; margin: 0; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .45em; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; text-align: center; line-height: 1.5; }

.flash { padding: .85rem 1.1rem; border-radius: 14px; margin-bottom: 1.25rem; font-weight: 500; }
.flash-ok { background: #dcfce7; color: var(--ok); }
.flash-error { background: #fee2e2; color: var(--danger); }

.toast { position: fixed; z-index: 100; right: calc(var(--gap) * 1.5); bottom: calc(var(--gap) * 1.5); max-width: min(420px, calc(100vw - var(--gap) * 2)); display: flex; align-items: flex-start; gap: .75rem; padding: .9rem .9rem .9rem 1.1rem; border-radius: 16px; background: #fff; color: var(--ink); font-weight: 500; box-shadow: var(--float-shadow-hover); border-left: 4px solid var(--ok); animation: toast-in .35s cubic-bezier(.2, .9, .3, 1.2); }
.toast-error { border-left-color: var(--danger); }
.toast.is-hiding { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.toast-close { margin-left: auto; background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .2rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { padding: 1.1rem 1.25rem; text-decoration: none; color: var(--ink); display: grid; gap: .15rem; }
.stat strong { font-size: 2rem; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat small { color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.admin-grid > .card { padding: 1.4rem; }
.admin-grid h2 { font-size: 1.1rem; }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .admin-grid { grid-template-columns: 1fr; } }
.kv { display: grid; gap: .6rem; margin: 0; }
.kv div { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; }
.kv dt { color: var(--muted); font-size: .875rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.msg-list { list-style: none; padding: 0; margin: 0; }
.msg-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.msg-list a { color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-list small { color: var(--muted); white-space: nowrap; }
.unread a, tr.unread strong { color: var(--ink); font-weight: 700; }
tr.unread { background: var(--brand-50); }
.message-body { white-space: pre-wrap; padding: 1.25rem; margin-top: 1.25rem; background: var(--bg-alt); border-radius: 10px; overflow-wrap: anywhere; }
article.card { padding: 1.5rem; }

.search { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 420px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.table th, .table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg-alt); }
.table td.right, .table th.right { text-align: right; }
.table a { text-decoration: none; }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pill-ok { background: #dcfce7; color: var(--ok); }
.pill-muted { background: var(--line); color: var(--ink-2); }
.pill-warn { background: #fef3c7; color: var(--warn); }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.editor-side { display: grid; gap: 1.25rem; position: sticky; top: 1rem; }
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } .editor-side { position: static; } }
.md-toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.image-preview { aspect-ratio: 16 / 9; border: 1.5px dashed var(--line); border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--bg-alt); color: var(--muted); font-size: .85rem; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.color-field, .range-field { display: flex; align-items: center; gap: .75rem; }
.color-field input[type="color"] { width: 56px; height: 40px; padding: 2px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.range-field input[type="range"] { flex: 1; accent-color: var(--brand); }
.range-field output { min-width: 4.5ch; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.settings-form { display: grid; gap: 1.25rem; max-width: 820px; }
.sticky-actions { position: sticky; bottom: 0; padding: 1rem 0; background: linear-gradient(transparent, var(--bg-alt) 35%); }
.narrow-form { max-width: 520px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.media-item { margin: 0; }
.media-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--bg-alt); }
.media-item figcaption { display: grid; gap: .2rem; padding: .75rem .9rem 0; overflow-wrap: anywhere; }
.media-item .btn-row { padding: 0 .9rem .9rem; margin-top: .6rem; }

.admin-bare .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 1rem clamp(1rem, 6vw, 5rem); background: radial-gradient(circle, rgb(15 118 110 / .24) 1.3px, transparent 1.8px) 0 0 / 22px 22px, linear-gradient(135deg, #f0fdfa, #ccfbf1 60%, #99f6e4); }
.login-card { width: min(100%, 400px); padding: 2.2rem 2rem 1.8rem; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -18px rgb(15 118 110 / .45), 0 4px 12px rgb(15 23 42 / .06) !important; }
.login-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 96px; margin: 0 auto .8rem; }
.login-card .btn-block { border-radius: 12px; }

.admin .stat { transition: transform .2s, box-shadow .2s; }
.admin a.stat:hover { transform: translateY(-3px); box-shadow: var(--float-shadow-hover); }
.admin .sticky-actions { position: sticky; bottom: var(--gap); z-index: 30; display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem; border-radius: 18px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--float-shadow-hover); }
.admin .table th { background: rgb(241 245 249 / .7); }
.admin .table th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.admin .table th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.admin .table th { border-bottom: 0; }
.admin .card.table-wrap { padding: .5rem; }

@media (max-width: 860px) {
  body.admin { --gap: 10px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: sticky; top: var(--gap); z-index: 60; height: auto; overflow: visible; flex-direction: row; align-items: center; justify-content: space-between; padding: .55rem .6rem .55rem .7rem; }
  .admin-side .admin-nav { display: none; position: absolute; inset: calc(100% + 8px) 0 auto 0; max-height: calc(100vh - 100px); overflow-y: auto; background: #134e4a; padding: .5rem .6rem .8rem; border-radius: var(--float-radius); box-shadow: var(--float-shadow-hover); }
  .admin-side .admin-nav.open { display: flex; }
  .admin-side .nav-toggle { color: #fff; border-color: rgb(255 255 255 / .15); border-radius: 12px; }
  .admin-side-foot { margin-top: .5rem; }
  .admin-topbar { position: static; padding-left: 1rem; margin-bottom: 1.1rem; }
  .user-name { display: none; }
  .topbar-trail .muted, .topbar-trail .sep { display: none; }
  .user-chip { padding-right: .3rem; }
  .admin-main { padding: 0 0 4rem; }
}

.admin { --series-1: #2a78d6; --series-2: #eb6834; --grid: #edf0f4; --axis: #64748b; }
.head-sub { margin: .25rem 0 0; }
.segmented { display: inline-flex; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.segmented a { padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.segmented a:hover { background: var(--bg-alt); color: var(--ink); }
.segmented a[aria-current="true"] { background: var(--ink); color: #fff; }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.delta { font-weight: 700; color: var(--ink-2); }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.card-head h2 { margin: 0; }
.mini-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.25rem 0 .5rem; }
.card-head + .mini-head { margin-top: 0; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: 0; font-size: .85rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.key-1 { background: var(--series-1); }
.key-2 { background: var(--series-2); }
.key-line-1, .key-line-2 { width: 16px; height: 3px; border-radius: 2px; }
.key-line-1 { background: var(--series-1); }
.key-line-2 { background: var(--series-2); }

.chart { position: relative; outline-offset: 4px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-svg text { font: 11px/1 var(--font); fill: var(--axis); font-variant-numeric: tabular-nums; }
.chart-svg .grid line { stroke: var(--grid); stroke-width: 1; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-views { stroke: var(--series-1); }
.chart-svg .line-visitors { stroke: var(--series-2); }
.chart-svg .area-views { fill: var(--series-1); fill-opacity: .1; }
.chart-svg .dot { stroke: #fff; stroke-width: 2; }
.chart-svg .dot-views { fill: var(--series-1); }
.chart-svg .dot-visitors { fill: var(--series-2); }
.chart-svg .crosshair { stroke: var(--axis); stroke-width: 1; stroke-opacity: .5; }
.chart.is-active [data-end], .chart:not(.is-active) [data-cursor] { display: none; }
.chart-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: 150px; padding: .55rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: .8rem; line-height: 1.5; }
.chart-tip strong { display: block; margin-bottom: .15rem; color: var(--ink); }
.chart-tip .row { display: flex; align-items: center; gap: .45rem; color: var(--ink-2); }
.chart-tip .row b { margin-left: auto; padding-left: .75rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.data-table { margin-top: .75rem; font-size: .875rem; }
.data-table summary { cursor: pointer; color: var(--muted); width: fit-content; }
.data-table .table-wrap { max-height: 280px; overflow-y: auto; margin-top: .5rem; }

.bar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.bar-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .25rem; }
.bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label a { color: var(--ink-2); text-decoration: none; }
.bar-label a:hover { color: var(--brand); text-decoration: underline; }
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { display: block; }
.bar rect { fill: var(--series-1); }
.segbar { display: block; border-radius: 5px; margin-bottom: .6rem; }
.segbar .seg-1 { fill: var(--series-1); }
.segbar .seg-2 { fill: var(--series-2); }
.privacy-note { display: block; margin: 1rem 0 0; }

.table-compact th, .table-compact td { padding: .55rem .6rem; }
.table-compact td .btn-sm { padding: .3rem .7rem; }
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { display: grid; gap: .15rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.activity li:last-child { border-bottom: 0; }
.activity a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity a:hover { color: var(--brand); }
.activity small { color: var(--muted); }
@media (max-width: 600px) {
  .admin-head .segmented { width: 100%; justify-content: space-between; }
  .kv div { grid-template-columns: 1fr; gap: .1rem; }
  .chart-svg text { font-size: 26px; }
  .chart-svg .tick-minor { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .stat { padding: .9rem 1rem; }
  .stat strong { font-size: 1.6rem; }
  .chart-svg .line { stroke-width: 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.sub-tabs { margin-bottom: 1rem; }
.term-add { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .5rem; margin-bottom: 1rem; }
.term-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.term-list li { display: grid; gap: .35rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.term-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.term-edit { display: flex; gap: .5rem; flex-wrap: wrap; }
.term-edit input { flex: 1 1 10rem; min-width: 0; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
@media (max-width: 640px) { .term-add { grid-template-columns: 1fr; } }

.chips, .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; text-decoration: none; color: inherit; }
.chip:hover, .chip[aria-current="true"] { border-color: var(--brand); color: var(--brand); }
.chip small { opacity: .6; }
.branch-card p { margin: .35rem 0; }

.pill-bad { background: #fee2e2; color: var(--danger); }
.seo-checks { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .45rem; font-size: .88rem; }
.seo-checks li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.4; }
.seo-checks i { margin-top: .15rem; flex: none; }
.seo-good i { color: var(--ok); }
.seo-warn i { color: var(--warn); }
.seo-bad i { color: var(--danger); }
.serp { display: grid; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-family: Arial, sans-serif; }
.serp-url { font-size: .78rem; color: #4d5156; overflow-wrap: anywhere; }
.serp-title { font-size: 1.15rem; line-height: 1.3; color: #1a0dab; overflow-wrap: anywhere; }
.serp-desc { font-size: .86rem; line-height: 1.5; color: #4d5156; overflow-wrap: anywhere; }
.seo-score { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .8rem; }
.seo-score strong { font-size: 2.4rem; line-height: 1; color: var(--brand); }
.seo-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.seo-todo li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.seo-todo li:last-child { border-bottom: 0; }
.seo-todo p { margin: .15rem 0 0; color: var(--ink-2); }
.seo-off { color: var(--warn); font-weight: 700; }
pre.code { margin: 0 0 .8rem; padding: .9rem 1rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font: .85rem/1.5 var(--mono); }

.b-testi { margin: 0; padding: 1.5rem; display: grid; gap: 1rem; align-content: space-between; }
.b-testi blockquote { margin: 0; color: var(--ink-2); line-height: 1.6; }
.b-testi figcaption { display: flex; align-items: center; gap: .75rem; }
.b-testi figcaption > span:last-child { display: grid; line-height: 1.3; }
.b-testi small { color: var(--muted); }
.b-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-weight: 800; font-size: .85rem; }
.b-faq { display: grid; gap: .7rem; }
.b-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1.2rem; }
.b-faq-item summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 700; color: var(--heading); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.b-faq-item summary::-webkit-details-marker { display: none; }
.b-faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); flex: none; transition: transform .2s; }
.b-faq-item[open] summary::after { transform: rotate(45deg); }
.b-faq-item p { margin: 0 0 1.1rem; color: var(--ink-2); }
.branch-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.b-grid .branch-card { height: 100%; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card .card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.post-card h3 { font-size: 1.12rem; line-height: 1.35; margin-bottom: .5rem; }
.post-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .94rem; line-height: 1.6; }
.read-more { margin-top: auto; padding-top: 1rem; font-size: .88rem; font-weight: 700; color: var(--brand); }
.read-more i { transition: transform .2s; }
.post-card:hover .read-more i, .featured-post:hover .read-more i { transform: translateX(4px); }
.post-card .cover { transition: transform .5s; }
.post-card:hover .cover { transform: scale(1.03); }
.featured-post { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; margin-bottom: 1.75rem; }
.featured-post .cover { aspect-ratio: auto; height: 100%; min-height: 320px; }
.featured-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.75rem); }
.featured-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin-bottom: .75rem; }
.featured-body h2 a { color: var(--heading); text-decoration: none; }
.featured-body .post-excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
@media (max-width: 800px) { .featured-post { grid-template-columns: 1fr; } .featured-post .cover { min-height: 0; aspect-ratio: 16 / 9; } }

.read-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; max-height: 2px; overflow: hidden; z-index: 60; background: var(--brand); opacity: .9; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.post-hero { padding: 2.5rem 0 1.5rem; background: linear-gradient(180deg, var(--brand-50), var(--bg)); }
.post-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.15; letter-spacing: -.02em; margin: .9rem 0 1rem; text-wrap: balance; }
.post-hero .lead { margin: 0 0 1.4rem; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6; }
.post-cat { display: inline-block; padding: .28rem .85rem; border-radius: 999px; background: var(--brand-100); color: var(--brand-700); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; margin-top: 1.1rem; }
.post-cat:hover { background: var(--brand); color: #fff; }
.post-byline { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.byline-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.byline-avatar.lg { width: 56px; height: 56px; font-size: 1.3rem; }
.byline-text { display: grid; gap: .1rem; }
.byline-text .post-meta { margin: 0; }
.post-cover-wrap { margin-top: .5rem; }
.post-cover { display: block; width: 100%; max-height: 520px; aspect-ratio: 21 / 9; object-fit: cover; border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); }
.post-section { padding-top: clamp(2rem, 5vw, 3.5rem); }
.post-layout { display: block; }
.post-layout.has-toc { display: grid; grid-template-columns: minmax(0, 720px) 250px; justify-content: center; gap: 3.5rem; align-items: start; }
.post-layout:not(.has-toc) .post-main { max-width: 720px; margin-inline: auto; }
.post-aside { position: sticky; top: 6rem; }
.toc { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .88rem; }
.toc-title { margin: 0 0 .6rem; font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.toc a { display: block; padding: .32rem .6rem; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.toc a:hover, .toc a.is-active { border-left-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.toc-l3 a { padding-left: 1.3rem; font-size: .84rem; }
.toc-mobile { display: none; margin-bottom: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toc-mobile summary { cursor: pointer; padding: .85rem 1.1rem; font-weight: 700; }
.toc-mobile .toc { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.toc-mobile .toc-title { display: none; }
@media (max-width: 980px) { .post-layout.has-toc { display: block; } .post-layout.has-toc .post-main { max-width: 720px; margin-inline: auto; } .post-aside { display: none; } .toc-mobile { display: block; } }

.post-prose { font-size: clamp(1.05rem, 1.4vw, 1.14rem); line-height: 1.85; color: var(--ink-2); }
.post-prose > p:first-child { font-size: 1.15em; color: var(--ink); }
.post-prose p { margin: 0 0 1.4em; }
.post-prose h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 2.2em 0 .7em; padding-top: .3em; letter-spacing: -.01em; scroll-margin-top: 6rem; }
.post-prose h3 { font-size: 1.25rem; margin: 1.8em 0 .6em; scroll-margin-top: 6rem; }
.post-prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-prose a:hover { text-decoration-thickness: 2px; }
.post-prose img { display: block; max-width: 100%; height: auto; margin: 2em auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.post-prose ul, .post-prose ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.post-prose li { margin: .5em 0; padding-left: .2em; }
.post-prose li::marker { color: var(--brand); font-weight: 700; }
.post-prose blockquote { margin: 2em 0; padding: 1.1em 1.4em; border-left: 4px solid var(--brand); background: var(--brand-50); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.08em; font-style: italic; color: var(--ink); }
.post-prose blockquote p { margin: 0; }
.post-prose pre { margin: 1.8em 0; font-size: .9rem; line-height: 1.65; }

.post-main > .tags { margin: 2.5rem 0 1.5rem; }
.share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 1.1rem 0; border-block: 1px solid var(--line); margin: 1.5rem 0 2rem; }
.share-label { margin-right: .4rem; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.share-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; transition: all .15s; font-size: 1rem; }
.share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.share-btn.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.author-box { display: flex; gap: 1.1rem; align-items: center; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.author-box p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.author-name { font-weight: 800; color: var(--heading) !important; margin-bottom: .2rem !important; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.post-nav-item { display: grid; gap: .3rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--heading); background: var(--surface); transition: border-color .15s, transform .15s; }
.post-nav-item:hover { border-color: var(--brand); transform: translateY(-2px); }
.post-nav-item small { color: var(--brand); font-weight: 700; }
.post-nav-item span { font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-nav-item.next { text-align: right; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav-item.next { text-align: left; } .author-box { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .post-card .cover, .read-more i, .share-btn { transition: none; } .post-card:hover .cover { transform: none; } }

@media (min-width: 961px) {
  :root { --boxed-w: min(var(--page-width, var(--container-w)), var(--container-max)); }
  main#main { width: var(--boxed-w); margin: .75rem auto 0; border-radius: var(--radius); overflow: clip; box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 8px 30px rgb(15 23 42 / .05); }
  main#main .container { width: 100%; padding-inline: clamp(1.25rem, 3vw, 2.75rem); }
  main#main .b-wide { width: 100%; }
  .site-footer { width: var(--boxed-w); margin: .75rem auto 1rem; border-radius: var(--radius); }
  .site-footer .container { width: 100%; padding-inline: clamp(1.25rem, 3vw, 2.75rem); }
}

.b-slider.img-fit-contain .b-slide-bg { object-fit: contain; }
.b-slider.img-fit-fill .b-slide-bg { object-fit: fill; }
.b-slider.img-fit-none .b-slide-bg { object-fit: none; }
.b-slider.img-pos-top .b-slide-bg { object-position: top; }
.b-slider.img-pos-bottom .b-slide-bg { object-position: bottom; }
.b-slider.img-pos-left .b-slide-bg { object-position: left; }
.b-slider.img-pos-right .b-slide-bg { object-position: right; }

@keyframes anim-failsafe { to { opacity: 1; transform: none; clip-path: none; } }
@keyframes a-fade { from { opacity: 0; } }
@keyframes a-fade-up { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes a-fade-down { from { opacity: 0; transform: translate3d(0, -28px, 0); } }
@keyframes a-fade-left { from { opacity: 0; transform: translate3d(-40px, 0, 0); } }
@keyframes a-fade-right { from { opacity: 0; transform: translate3d(40px, 0, 0); } }
@keyframes a-slide-up { from { opacity: 0; transform: translate3d(0, 80px, 0); } }
@keyframes a-zoom-in { from { opacity: 0; transform: scale(.86); } }
@keyframes a-zoom-out { from { opacity: 0; transform: scale(1.14); } }
@keyframes a-pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes a-bounce { 0% { opacity: 0; transform: translate3d(0, -44px, 0); } 55% { opacity: 1; transform: translate3d(0, 10px, 0); } 75% { transform: translate3d(0, -5px, 0); } 90% { transform: translate3d(0, 2px, 0); } 100% { opacity: 1; transform: none; } }
@keyframes a-flip-x { from { opacity: 0; transform: perspective(700px) rotateX(-70deg); } }
@keyframes a-flip-y { from { opacity: 0; transform: perspective(700px) rotateY(-70deg); } }
@keyframes a-rotate { from { opacity: 0; transform: rotate(-8deg) scale(.92); } }
@keyframes a-skew { from { opacity: 0; transform: translate3d(-30px, 0, 0) skewX(-10deg); } }
@keyframes a-reveal-left { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes a-reveal-right { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes a-reveal-up { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes a-reveal-down { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes a-float { to { transform: translate3d(0, -10px, 0); } }
@keyframes a-pulse { to { transform: scale(1.04); } }

.anim-fade { --anim-name: a-fade; } .anim-fade-up { --anim-name: a-fade-up; } .anim-fade-down { --anim-name: a-fade-down; }
.anim-fade-left { --anim-name: a-fade-left; } .anim-fade-right { --anim-name: a-fade-right; } .anim-slide-up { --anim-name: a-slide-up; }
.anim-zoom-in { --anim-name: a-zoom-in; } .anim-zoom-out { --anim-name: a-zoom-out; } .anim-pop { --anim-name: a-pop; } .anim-bounce { --anim-name: a-bounce; }
.anim-flip-x { --anim-name: a-flip-x; } .anim-flip-y { --anim-name: a-flip-y; } .anim-rotate { --anim-name: a-rotate; } .anim-skew { --anim-name: a-skew; }
.anim-reveal-left { --anim-name: a-reveal-left; } .anim-reveal-right { --anim-name: a-reveal-right; }
.anim-reveal-up { --anim-name: a-reveal-up; } .anim-reveal-down { --anim-name: a-reveal-down; }
.anim-float { --anim-name: a-float; } .anim-pulse { --anim-name: a-pulse; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-anim]:not([data-anim-stagger]):not([data-anim-loop]):not(.in),
  [data-anim-stagger]:not(.in) :is(.b-grid, .grid, .b-faq, .g-cards) > * { opacity: 0; animation: anim-failsafe 0s 5s forwards; }
  [data-anim].in:not([data-anim-stagger]) { animation: var(--anim-name) var(--anim-d, 600ms) var(--anim-delay, 0ms) cubic-bezier(.22, .7, .2, 1) both; }
  [data-anim-stagger].in :is(.b-grid, .grid, .b-faq, .g-cards) > * { animation: var(--anim-name) var(--anim-d, 600ms) calc(var(--anim-delay, 0ms) + var(--i, 0) * 90ms) cubic-bezier(.22, .7, .2, 1) both; }
  [data-anim-loop].in:not([data-anim-stagger]) { animation: var(--anim-name) 2.6s ease-in-out infinite alternate; }
  [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(2) { --i: 1; } [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(3) { --i: 2; }
  [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(4) { --i: 3; } [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(5) { --i: 4; }
  [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(6) { --i: 5; } [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(7) { --i: 6; }
  [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(8) { --i: 7; } [data-anim-stagger] :is(.b-grid, .grid, .b-faq, .g-cards) > :nth-child(n+9) { --i: 8; }
}

.user-edit { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.user-edit select, .user-edit input { min-width: 0; max-width: 220px; padding: .4rem .6rem; font-size: .88rem; }

.chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; font-size: 15px; }
.chat-fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 10px 28px -6px rgb(15 23 42 / .45); transition: transform .2s, background-color .2s; }
.chat-fab:hover { transform: scale(1.06); background: var(--brand-600); }
.chat-fab i { font-size: 24px; grid-area: 1 / 1; transition: transform .25s, opacity .2s; }
.chat-fab .chat-fab-close { opacity: 0; transform: rotate(-60deg) scale(.6); }
.chat.is-open .chat-fab-open { opacity: 0; transform: rotate(60deg) scale(.6); }
.chat.is-open .chat-fab-close { opacity: 1; transform: none; }
.chat-dot { position: absolute; top: 4px; right: 4px; width: 13px; height: 13px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
.chat-dot[hidden], .chat-panel[hidden], .chat-quick[hidden], .chat-ident[hidden] { display: none; }
.chat-panel { position: absolute; right: 0; bottom: 72px; display: flex; flex-direction: column; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 7rem)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px -12px rgb(15 23 42 / .4); overflow: hidden; animation: chat-in .22s ease-out; }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; background: linear-gradient(135deg, var(--brand-700), var(--brand)); color: #fff; }
.chat-head > div { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.chat-head small { opacity: .85; font-size: .78rem; }
.chat-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.chat-x { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; padding: .4rem; border-radius: 8px; }
.chat-x:hover { background: rgb(255 255 255 / .18); }
.chat-body, .chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--bg-alt); overscroll-behavior: contain; }
.chat-msg { max-width: 86%; display: flex; flex-direction: column; }
.chat-msg p { margin: 0; padding: .6rem .85rem; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.chat-bot, .chat-admin { align-self: flex-start; }
.chat-bot p, .chat-admin p { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.chat-admin p { background: var(--brand-50); border-color: var(--brand-100); }
.chat-visitor { align-self: flex-end; }
.chat-visitor p { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg p a { color: inherit; text-decoration: underline; font-weight: 600; }
.chat-visitor.is-local { opacity: .6; }
.chat-typing p { display: flex; gap: 4px; padding: .8rem .9rem; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chat-bounce 1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; } .chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; border-top: 1px solid var(--line); max-height: 9.5rem; overflow-y: auto; background: var(--surface); }
.chat-chip { padding: .4rem .8rem; border: 1px solid var(--brand); border-radius: 999px; background: var(--surface); color: var(--brand); font: inherit; font-size: .84rem; cursor: pointer; text-align: left; text-decoration: none; }
.chat-chip:hover { background: var(--brand-50); }
.chat-chip-human { background: var(--brand); color: #fff; }
.chat-chip-human:hover { background: var(--brand-600); }
.chat-form, .chat-ident { display: flex; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--line); background: var(--surface); }
.chat-form input, .chat-ident input { flex: 1; min-width: 0; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--bg); color: var(--ink); }
.chat-form input:focus, .chat-ident input:focus { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.chat-form button, .chat-ident button { flex: none; border: 0; border-radius: 999px; background: var(--brand); color: #fff; padding: 0 1rem; cursor: pointer; font: inherit; font-weight: 700; }
.chat-form button { width: 42px; padding: 0; }
.chat-form button:hover, .chat-ident button:hover { background: var(--brand-600); }
.chat-ident { flex-wrap: wrap; background: var(--brand-50); }
.chat-ident p { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--ink-2); }
.chat-ident input { border-radius: 10px; flex: 1 1 40%; }
@media (max-width: 520px) { .chat { right: .75rem; bottom: .75rem; } .chat-panel { position: fixed; inset: auto .5rem 4.9rem .5rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .chat-panel, .chat-typing i { animation: none; } .chat-fab, .chat-fab i { transition: none; } }

.chat-admin { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-admin .chat-log { min-height: 320px; max-height: 58vh; background: var(--bg-alt); }
.chat-admin .chat-msg { max-width: 78%; }
.chat-who { font-size: .74rem; color: var(--muted); margin: 0 .5rem .15rem; }
.chat-visitor .chat-who { align-self: flex-end; }
.chat-reply { display: flex; gap: .6rem; align-items: flex-end; padding: .9rem 1rem; border-top: 1px solid var(--line); }
.chat-reply textarea { flex: 1; resize: vertical; min-height: 3.2rem; }
.chat-admin .help { padding: 0 1rem .9rem; margin: 0; }
.chat-admin .chat-bot p { background: #f1f5f9; font-style: italic; }

.g-panel { --g-accent: #e8c56a; --g-text: #fff; --g-muted: rgb(255 255 255 / .72); --g-card: rgb(255 255 255 / .07); --g-card-line: rgb(255 255 255 / .16); --g-icon-bg: rgb(232 197 106 / .18); --g-icon: #e8c56a;
  position: relative; isolation: isolate; overflow: hidden; color: var(--g-text); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); }
.g-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-bg); }
.g-panel::after { content: ""; position: absolute; z-index: -1; top: -30%; right: -10%; width: 60%; height: 90%; background: radial-gradient(closest-side, rgb(255 255 255 / .12), transparent); pointer-events: none; }
.gt-purple { --g-bg: linear-gradient(135deg, #2e1646 0%, #46215c 55%, #552b6b 100%); }
.gt-dark { --g-bg: linear-gradient(135deg, #0b1120 0%, #111a2e 60%, #16213a 100%); }
.gt-brand { --g-bg: linear-gradient(135deg, var(--brand-700), var(--brand)); --g-accent: #fde68a; --g-icon-bg: rgb(255 255 255 / .18); --g-icon: #fff; }
.gt-light { --g-bg: linear-gradient(135deg, var(--brand-50), var(--bg-alt)); --g-text: var(--heading); --g-muted: var(--ink-2); --g-accent: var(--brand); --g-card: var(--surface); --g-card-line: var(--line); --g-icon-bg: var(--brand-100); --g-icon: var(--brand-700); }
.gt-light::after { display: none; }

.g-cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cards.g-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cards.g-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 9.5rem; padding: 1.15rem 1.25rem; background: var(--g-card); border: 1px solid var(--g-card-line); border-radius: 18px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); transition: transform .2s, border-color .2s, background-color .2s; }
.g-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--g-accent) 55%, transparent); }
.g-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--g-icon-bg); color: var(--g-icon); font-size: 1.1rem; }
.g-icon:empty { visibility: hidden; }
.g-text h3 { margin: 0 0 .2rem; font-size: 1.05rem; line-height: 1.3; color: var(--g-text); }
.g-text h3 a { color: inherit; text-decoration: none; }
.g-text p { margin: 0; font-size: .9rem; color: var(--g-muted); }
.g-head { margin-bottom: 1.5rem; }
.g-title { margin: 0 0 .8rem; color: var(--g-text); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(2.2rem, 5.2vw, 3.9rem); text-wrap: balance; }
.g-title-sm { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; }
.g-hl { color: var(--g-accent); }
.g-sub { margin: 0 0 1.6rem; max-width: 46ch; color: var(--g-muted); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; }
.g-head .g-sub { margin-bottom: 0; }
.g-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem; padding: .4rem .9rem; border: 1px solid color-mix(in srgb, var(--g-accent) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--g-accent) 12%, transparent); color: var(--g-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.g-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.g-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; min-height: var(--g-min, 0); border-radius: 0; }
.g-hero .g-cards { max-width: 520px; justify-self: end; width: 100%; }
.btn-gold { background: linear-gradient(135deg, #b8860b, #e8c56a); border-color: transparent; color: #2a1a05; font-weight: 800; box-shadow: 0 8px 24px -8px rgb(232 197 106 / .6); }
.btn-gold:hover { background: linear-gradient(135deg, #c9960f, #f0d27c); color: #2a1a05; border-color: transparent; transform: translateY(-1px); }
.btn-glass { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .28); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgb(255 255 255 / .2); color: #fff; border-color: rgb(255 255 255 / .45); }
.gt-light .btn-glass { background: var(--surface); border-color: var(--line); color: var(--heading); }
@media (max-width: 860px) { .g-hero { grid-template-columns: 1fr; } .g-hero .g-cards { max-width: none; justify-self: stretch; } }
@media (max-width: 520px) { .g-cards.g-cols-3, .g-cards.g-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-card { min-height: 8.2rem; padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .g-card { transition: none; } .g-card:hover { transform: none; } }

.gold-title { margin: 0 0 .4rem; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.15; letter-spacing: -.01em; }
.gold-time { margin: 0 0 2rem; text-align: center; color: var(--ink-2); font-size: clamp(1rem, 2vw, 1.25rem); font-variant-numeric: tabular-nums; }
.gold-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; max-width: 1000px; margin-inline: auto; }
.gold-solo { grid-template-columns: minmax(0, 520px); justify-content: center; }
.gold-card { --gp-dark: #2e1646; --gp-main: #6d28d9; --gp-soft: #f3e8ff; padding: 1.4rem 1.3rem 1.2rem; border: 0; border-radius: 24px; background: #fff; color: var(--heading); box-shadow: 0 18px 40px -22px rgb(46 22 70 / .45); }
.gold-pick { display: grid; gap: .45rem; margin-bottom: 1rem; }
.gold-pick > span { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-main); }
.gold-pick select { width: 100%; padding: .7rem 1rem; border: 0; border-radius: 12px; background: var(--gp-soft); color: var(--gp-dark); font: inherit; font-weight: 700; cursor: pointer; }
.gold-pick select:focus-visible { outline: none; background: #e9d5ff; }
.gold-pick-solo { margin: 0 0 1rem; text-align: center; font-weight: 800; color: var(--gp-main); }
.gold-sub { margin: 0 0 .6rem; font-size: .95rem; text-align: center; color: var(--ink-2); }
.gold-table-wrap { border: 0; border-radius: 16px; overflow: hidden; min-height: 7rem; background: #faf5ff; }
.gold-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gold-table th { padding: .85rem 1.1rem; background: linear-gradient(135deg, #46215c, var(--gp-main)); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gold-table th.col-name, .gold-table td.col-name { text-align: left; }
.gold-table th.col-price, .gold-table td.col-price { text-align: right; }
.gold-table td { padding: .7rem 1.1rem; border: 0; color: var(--heading); font-variant-numeric: tabular-nums; }
.gold-table tbody tr { transition: background-color .15s; }
.gold-table tbody tr:nth-child(even) td { background: #fff; }
.gold-table tbody tr:hover td { background: #f3e8ff; }
.karat { display: inline-block; min-width: 3.2rem; padding: .22rem .7rem; border-radius: 999px; background: var(--gp-soft); color: var(--gp-main); font-size: .82rem; font-weight: 800; text-align: center; }
.gold-table td.price { white-space: nowrap; }
.gold-table td.price small { margin-right: .35rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
.gold-table td.price strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--gp-dark); }
.gold-table tr.is-top td { background: #f3e8ff; }
.gold-table tr.is-top td.price strong { font-size: 1.3rem; color: var(--gp-main); }
.gold-table tr.is-top .karat { background: var(--gp-main); color: #fff; }
.trend { margin-left: .4rem; font-size: .68rem; }
.trend.up { color: #15803d; }
.trend.down { color: #b91c1c; }
.gold-updated { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: .65rem 1rem; background: #f3e8ff; color: var(--gp-dark); font-size: .78rem; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgb(22 163 74 / .55); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 .45rem rgb(22 163 74 / 0); } 100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.gold-loading, .gold-error { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.gold-error { color: var(--danger); }
.gold-retry { border: 0; background: none; color: var(--gp-main); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.gold-note { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; padding-top: .2rem; font-size: .8rem; color: var(--muted); }
@media (max-width: 800px) { .gold-grid { grid-template-columns: 1fr; } }

.site-footer.ft-glass { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 24px 60px -24px rgb(28 11 46 / .7); }
.site-footer.ft-glass::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 48% at 14% 18%, rgb(192 132 252 / .34), transparent 70%), radial-gradient(34% 44% at 88% 82%, rgb(232 197 106 / .18), transparent 70%), radial-gradient(30% 40% at 60% 8%, rgb(236 72 153 / .14), transparent 70%); }
.site-footer.ft-glass .footer-bottom { border-top-color: rgb(255 255 255 / .14); }

[data-widget] { position: relative; }
.drag-handle { position: absolute; top: 2px; left: 50%; z-index: 2; transform: translateX(-50%); display: grid; place-items: center; width: 34px; height: 16px; padding: 0; border: 0; border-radius: 0 0 8px 8px; background: transparent; color: var(--muted); font-size: .7rem; cursor: grab; opacity: 0; transition: opacity .15s, background-color .15s; }
[data-widget]:hover > .drag-handle, [data-widget]:focus-within > .drag-handle, .drag-handle:focus-visible { opacity: 1; background: var(--bg-alt); }
.drag-handle:hover { color: var(--brand); }
.drag-handle:active { cursor: grabbing; }
.drag-handle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.is-dragging { opacity: .45; outline: 2px dashed var(--brand); outline-offset: -2px; }
.drag-tip { color: var(--muted); }
.drag-tip i { margin-inline: .15em; }
@media (hover: none) { .drag-handle { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .drag-handle { transition: none; } }
.kv dd svg.bar { display: block; margin-top: .35rem; }
.kv .bar-track { fill: var(--line); }
.media-group { margin-top: 1.75rem; scroll-margin-top: 1rem; }
.media-group-title { font-size: 1.05rem; margin: 0 0 .75rem; }
.media-jump { flex-wrap: wrap; margin-top: .5rem; }
.media-jump small { opacity: .7; }
.media-group-range { margin: -.5rem 0 .75rem; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal th { font-size: .72rem; font-weight: 600; color: var(--muted); padding: .2rem 0; text-align: center; }
.cal td { padding: 0; }
.cal-day { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; font-size: .85rem; color: inherit; text-decoration: none; }
.cal-day:hover { background: var(--bg-alt); }
.cal-day.has-posts { background: rgb(15 118 110 / .12); font-weight: 600; }
.cal-day.is-today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day.is-selected { background: var(--brand); color: #fff; }
.cal-count { position: absolute; top: 2px; right: 3px; min-width: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .62rem; line-height: 1.05rem; text-align: center; }
.cal-day.is-selected .cal-count { background: #fff; color: var(--brand); }
.cal-summary { margin: 0 0 .5rem; }