:root {
    --ink: #0b2440;
    --muted: #5d7085;
    --teal-900: #075e5a;
    --teal-800: #087c76;
    --teal-700: #0a918a;
    --teal-500: #21b8b0;
    --teal-100: #dff7f4;
    --teal-50: #f0fbfa;
    --blue: #1769e0;
    --blue-600: #2f7cf0;
    --sky: #e9f4ff;
    --violet: #7c5cf0;
    --violet-100: #f0ecff;
    --pink: #ef4d94;
    --coral: #ef5163;
    --coral-100: #ffe6e9;
    --amber: #f3a712;
    --amber-100: #fff3d6;
    --lime: #74c948;
    --cream: #fff9ed;
    --surface: #fff;
    --canvas: #f6faf9;
    --line: #d8e5e7;
    --success: #168b62;
    --danger: #c93643;
    --shadow-sm: 0 8px 24px rgba(13, 51, 66, .08);
    --shadow-lg: 0 24px 60px rgba(13, 51, 66, .14);
    --shadow-glow: 0 14px 30px rgba(8, 124, 118, .22);
    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 34px;
    --container: 1200px;
    --font-scale: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
html.fs-90 { font-size: 14.4px; }
html.fs-100 { font-size: 16px; }
html.fs-110 { font-size: 17.6px; }
html.fs-120 { font-size: 19.2px; }
html.fs-130 { font-size: 20.8px; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(760px 420px at 96% -8%, rgba(124,92,240,.07), transparent 60%),
        radial-gradient(640px 380px at -6% 12%, rgba(243,167,18,.09), transparent 55%),
        var(--canvas);
    font-family: "Kanit", "Leelawadee UI", Tahoma, system-ui, sans-serif;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }
a { color: var(--teal-800); text-decoration: none; }
a:hover { color: var(--teal-900); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #70d9d3; outline-offset: 3px; }
.container { width: min(calc(100% - 36px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 10px; }
.skip-link:focus { top: 16px; }
.eyebrow { color: var(--teal-800); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.section { padding: 82px 0; }
.section.compact { padding: 54px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-head h2, .page-hero h1 { margin: 6px 0 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.16; letter-spacing: -.035em; }
.section-head p { max-width: 600px; margin: 0; color: var(--muted); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar { background: linear-gradient(90deg, var(--teal-900), var(--ink) 55%, #0e2a52); color: #dcebf2; font-size: .84rem; }
.topbar-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar a { color: #fff; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }
.tool-button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; min-width: 34px; height: 30px; border-radius: 9px; cursor: pointer; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(216,229,231,.9); backdrop-filter: blur(16px); }
.header-inner { min-height: 84px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 285px; color: var(--ink); }
.brand img { width: 54px; height: 54px; }
.brand-name { display: block; font-weight: 900; line-height: 1.22; font-size: 1.05rem; }
.brand-sub { display: block; color: var(--teal-800); font-size: .76rem; font-weight: 800; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.site-nav a { display: block; padding: 10px 12px; color: var(--ink); font-weight: 750; border-radius: 11px; }
.site-nav a:hover, .site-nav a.active { background: var(--teal-50); color: var(--teal-800); }
.site-nav a.active { background: linear-gradient(135deg, var(--teal-100), var(--violet-100)); }
.header-action { flex: 0 0 auto; }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-size: 1.35rem; cursor: pointer; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 20px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; font-weight: 850; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.button:hover { transform: translateY(-3px) scale(1.02); }
.button:active { transform: translateY(-1px) scale(.99); }
.button.primary { background: linear-gradient(135deg, var(--teal-800), var(--teal-500) 65%, var(--lime)); background-size: 160% 160%; color: #fff; box-shadow: var(--shadow-glow); }
.button.primary:hover { box-shadow: 0 18px 34px rgba(8,124,118,.32); }
.button.secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button.secondary:hover { border-color: var(--teal-500); color: var(--teal-800); box-shadow: 0 10px 22px rgba(33,184,176,.16); }
.button.blue { background: linear-gradient(135deg, #145cd0, #2990ef); color: #fff; box-shadow: 0 12px 24px rgba(23,105,224,.24); }
.button.danger { background: #fff0f1; border-color: #ffc9ce; color: var(--danger); }
.button.small { min-height: 38px; padding: 7px 13px; border-radius: 10px; font-size: .86rem; }
.button.wide { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-carousel { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; color: #fff; isolation: isolate; }
.hero-carousel-track { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s ease; }
.hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-carousel-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(4,26,36,.86) 0%, rgba(4,26,36,.6) 42%, rgba(8,124,118,.32) 78%, rgba(124,92,240,.28) 100%); }
.hero-carousel-content { position: relative; z-index: 2; padding: 64px 0; }
.hero-carousel-eyebrow { color: #a9f2ea; }
.hero-carousel-title { max-width: 780px; margin: 14px 0 16px; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.28; letter-spacing: -.01em; text-shadow: 0 6px 24px rgba(0,0,0,.35); }
.hero-carousel-sub { max-width: 620px; margin: 0 0 28px; color: #dcefee; font-size: 1.05rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.meta-pill { padding: 8px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 999px; color: var(--muted); font-size: .9rem; }
.meta-pill:nth-child(1) { border-color: rgba(33,184,176,.35); color: var(--teal-900); }
.meta-pill:nth-child(2) { border-color: rgba(243,167,18,.4); color: #8a5c00; }
.hero-carousel .meta-pill { background: rgba(6,32,44,.5); border-color: rgba(255,255,255,.28); color: #eaf6f5; backdrop-filter: blur(3px); }
.hero-carousel .button.secondary.light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }
.hero-carousel .button.secondary.light:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.hero-arrow { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(6,32,44,.4); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.hero-arrow:hover { background: rgba(6,32,44,.7); transform: translateY(-50%) scale(1.06); }
.hero-arrow.prev { left: 18px; } .hero-arrow.next { right: 18px; }
.hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 9px; }
.hero-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.hero-dots button.is-active { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .4s ease; transform: none !important; } }

.hero-strip { padding: 44px 0; background: linear-gradient(135deg, #eafafa 0%, #f8fbf6 46%, #eef0ff 78%, #fff3e0 100%); border-bottom: 1px solid var(--line); }
.hero-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero-strip-inner h2 { margin: 10px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hero-strip-inner p { max-width: 620px; margin: 0; color: var(--muted); }
.hero-strip-note { flex-shrink: 0; padding: 16px 22px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); border-top: 4px solid var(--amber); }
.hero-strip-note strong { display: block; }
.hero-strip-note small { color: var(--muted); }

.stats-band { position: relative; margin-top: -1px; background: linear-gradient(115deg, var(--ink) 0%, #0e2a52 45%, var(--teal-900) 100%); color: #fff; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 200px at 88% 0%, rgba(124,92,240,.28), transparent 65%), radial-gradient(360px 200px at 8% 100%, rgba(33,184,176,.28), transparent 65%); pointer-events: none; }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: 2rem; line-height: 1; background: linear-gradient(120deg, #fff, var(--teal-100)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: #c9dce6; font-size: .9rem; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quick-card { position: relative; min-height: 210px; padding: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease; }
.quick-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.quick-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -50px; bottom: -50px; border-radius: 50%; background: var(--teal-100); transition: transform .3s ease; }
.quick-card:hover::after { transform: scale(1.25); }
.quick-card:nth-child(2)::after { background: var(--amber-100); }.quick-card:nth-child(3)::after { background: var(--violet-100); }.quick-card:nth-child(4)::after { background: var(--coral-100); }
.quick-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--teal-500), var(--teal-800)); color: #fff; font-size: 1.55rem; box-shadow: 0 10px 18px rgba(8,124,118,.28); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.quick-card:hover .quick-icon { transform: rotate(-8deg) scale(1.08); }
.quick-card:nth-child(2) .quick-icon { background: linear-gradient(135deg, var(--amber), #ffcf5c); box-shadow: 0 10px 18px rgba(243,167,18,.3); }
.quick-card:nth-child(3) .quick-icon { background: linear-gradient(135deg, var(--violet), #a58bff); box-shadow: 0 10px 18px rgba(124,92,240,.3); }
.quick-card:nth-child(4) .quick-icon { background: linear-gradient(135deg, var(--coral), #ff7f8c); box-shadow: 0 10px 18px rgba(239,81,99,.3); }
.quick-card h3 { margin: 28px 0 4px; font-size: 1.22rem; }
.quick-card p { margin: 0; color: var(--muted); font-size: .91rem; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card .service-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--teal-50); color: var(--teal-800); font-size: 1.35rem; }
.service-card:nth-child(3n+2) .service-icon { background: var(--amber-100); color: #9a6300; }
.service-card:nth-child(3n) .service-icon { background: var(--violet-100); color: #5c3fd6; }
.service-card h3 { margin: 18px 0 8px; }
.service-card p { color: var(--muted); margin: 0 0 16px; }
.service-detail { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-image { aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #d6f6f2, #e2edff 55%, #f0ecff); color: var(--teal-800); font-size: 3rem; }
.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .news-image img { transform: scale(1.06); }
.news-body { padding: 22px; }
.category { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--teal-50); color: var(--teal-800); font-size: .76rem; font-weight: 850; }
.news-card h3 { margin: 12px 0 8px; font-size: 1.25rem; line-height: 1.35; }
.news-card p { margin: 0 0 15px; color: var(--muted); }
.news-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .82rem; }

.feature-band { position: relative; padding: 66px 0; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--teal-900), var(--teal-700) 45%, var(--violet) 130%); }
.feature-band::before { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.feature-band::after { content: ""; position: absolute; width: 320px; height: 320px; left: -120px; bottom: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(243,167,18,.22), transparent 70%); }
.feature-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.feature-copy h2 { margin: 8px 0 14px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; }
.feature-copy p { color: #d4f2ef; font-size: 1.08rem; }
.feature-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature-tile { padding: 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); color: #fff; transition: transform .25s ease, background .25s ease; }
.feature-tile:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
.feature-tile strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }.feature-tile span { color: #d6efee; font-size: .9rem; }

.staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.staff-card { padding: 22px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.staff-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); }
.staff-photo { width: 118px; height: 118px; margin: 0 auto 16px; overflow: hidden; border-radius: 35px; background: linear-gradient(135deg, var(--teal-100), var(--violet-100)); display: grid; place-items: center; color: var(--teal-800); font-size: 2.5rem; font-weight: 900; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card h3 { margin: 0 0 4px; }.staff-card p { margin: 0; color: var(--muted); font-size: .9rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-item { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 18px; background: #dfeeee; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.gallery-item:hover img { transform: scale(1.04); }
.gallery-caption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 11px; color: #fff; border-radius: 11px; background: rgba(11,36,64,.78); font-size: .82rem; }

.page-hero { position: relative; padding: 70px 0 44px; overflow: hidden; background: linear-gradient(120deg, var(--teal-50), #edf4ff 55%, var(--violet-100)); border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(239,167,18,.16), transparent 70%); }
.page-hero p { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; }
.content-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.content-card p { margin-top: 0; }
.sidebar-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.sidebar-card h3 { margin-top: 0; }
.list-clean { list-style: none; padding: 0; margin: 0; }.list-clean li { padding: 11px 0; border-bottom: 1px solid var(--line); }.list-clean li:last-child { border-bottom: 0; }
.download-list { display: grid; gap: 12px; }
.download-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.download-item h3 { margin: 0 0 3px; }.download-item p { margin: 0; color: var(--muted); font-size: .88rem; }
.search-form { display: flex; gap: 10px; }.search-form input { flex: 1; }
.empty-state { padding: 60px 24px; text-align: center; border: 1px dashed #b9cfd3; border-radius: var(--radius); background: rgba(255,255,255,.55); color: var(--muted); }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; }
.contact-panel { padding: 34px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.contact-panel h2 { margin-top: 0; }.contact-panel a { color: #8fe0da; }.contact-panel p { color: #d9e8ef; }
.stack-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.span-2 { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: var(--ink); font-weight: 760; }
input, textarea, select { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); border: 1px solid #c8d9dc; border-radius: 12px; background: #fff; }
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--teal-700); box-shadow: 0 0 0 4px rgba(33,184,176,.13); outline: 0; }
fieldset { padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
legend { padding: 0 8px; font-weight: 900; }
.honeypot { position: absolute; left: -9999px; }
.alert { padding: 14px 16px; border-radius: 13px; border: 1px solid; }
.alert.success { color: #126143; background: #ebfff6; border-color: #a8e7cc; }
.alert.error { color: #9c2631; background: #fff0f1; border-color: #ffcbd0; }
.alert.warning { color: #775000; background: #fff9e8; border-color: #f1d990; }

.site-footer { position: relative; padding: 58px 0 24px; color: #dce9ef; background: #081d33; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--teal-500), var(--amber), var(--coral), var(--violet)); }
.site-footer a:hover { color: var(--teal-500); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .7fr .8fr .9fr; gap: 38px; }
.footer-brand { display: flex; gap: 14px; align-items: center; color: #fff; }
.footer-brand img { width: 58px; }.footer-brand strong { display: block; font-size: 1.1rem; }.footer-brand span { color: #9fc0ce; font-size: .85rem; }
.site-footer h3 { margin-top: 0; color: #fff; font-size: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }.site-footer li { margin-bottom: 8px; }.site-footer a { color: #dce9ef; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 38px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #91abba; font-size: .82rem; }

/* Installer */
.install-page { min-height: 100vh; background: linear-gradient(135deg, #dbf6f4, #edf4ff); }
.install-shell { width: min(1120px, calc(100% - 28px)); margin: 40px auto; display: grid; grid-template-columns: .8fr 1.2fr; overflow: hidden; border-radius: 34px; background: #fff; box-shadow: var(--shadow-lg); }
.install-brand { padding: 58px 42px; color: #fff; background: linear-gradient(155deg, var(--teal-900), var(--teal-700)); }
.install-brand h1 { margin: 18px 0; font-size: 3rem; line-height: 1.08; }.install-brand p { color: #d2f0ee; }
.install-brand .eyebrow { color: #a7ebe6; }.install-card { padding: 48px; }
.install-card h2 { margin-top: 8px; }.success-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; background: #e4fff3; color: var(--success); font-size: 2rem; font-weight: 900; }

/* Admin */
.admin-page { background: #eef4f5; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 18px; color: #d8e9ef; background: #09273f; overflow-y: auto; }
.admin-logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; color: #fff; }.admin-logo img { width: 48px; }.admin-logo strong { display: block; line-height: 1.25; }.admin-logo small { color: #8cb4c2; }
.admin-nav { display: grid; gap: 5px; }.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; color: #d8e9ef; font-weight: 750; }.admin-nav a:hover, .admin-nav a.active { color: #fff; background: #14506a; }
.admin-sidebar-bottom { margin-top: 25px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.admin-main { min-width: 0; }
.admin-topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); }
.admin-user { display: flex; align-items: center; gap: 10px; }.admin-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--teal-100); color: var(--teal-900); font-weight: 900; }
.admin-content { padding: 30px; }.admin-page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.admin-page-head h1 { margin: 5px 0 0; font-size: 2rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.metric-card strong { display: block; margin-top: 12px; font-size: 2rem; line-height: 1; }.metric-card span { color: var(--muted); font-size: .9rem; }
.admin-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-card + .admin-card { margin-top: 20px; }.admin-card h2 { margin-top: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; } th, td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); background: #f7fafb; font-size: .82rem; }
.status { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #edf5f5; color: var(--muted); font-size: .76rem; font-weight: 850; }.status.published, .status.active { background: #e6faef; color: #15714e; }.status.draft, .status.new { background: #fff4d6; color: #795500; }.status.closed { background: #edf1f5; color: #4f6276; }
.table-actions { display: flex; gap: 6px; white-space: nowrap; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.admin-form-grid .full { grid-column: 1 / -1; }
.admin-mobile-toggle { display: none; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #dff7f4, #edf3ff); }
.login-card { width: min(460px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); }.login-brand { text-align: center; margin-bottom: 24px; }.login-brand img { width: 72px; }.login-brand h1 { margin: 12px 0 2px; }.login-brand p { margin: 0; color: var(--muted); }

body.high-contrast { --ink: #000; --muted: #17222c; --teal-800: #005f5a; --canvas: #fff; --line: #65737a; }
body.high-contrast .site-header { background: #fff; }

@media (max-width: 1060px) {
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 84px; padding: 16px 18px 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
    .site-nav.open { display: block; }.site-nav ul { align-items: stretch; flex-direction: column; }.nav-toggle { display: block; }.header-action { display: none; }
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }.quick-grid { grid-template-columns: 1fr 1fr; }.staff-grid, .gallery-grid { grid-template-columns: repeat(3, 1fr); }.footer-grid { grid-template-columns: 1fr 1fr; }
    .admin-layout { grid-template-columns: 230px 1fr; }.metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
    .topbar-inner { min-height: 34px; }.topbar .hide-mobile { display: none; }.header-inner { min-height: 72px; }.brand { min-width: 0; }.brand img { width: 46px; height: 46px; }.brand-name { font-size: .94rem; }.brand-sub { font-size: .7rem; }.site-nav { top: 72px; }
    .hero { padding-top: 46px; }.hero-grid, .feature-grid, .content-grid, .contact-grid, .footer-grid, .install-shell { grid-template-columns: 1fr; }.hero-copy h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); }.hero-visual { min-height: 390px; }.hero-panel { min-height: 365px; }.floating-note { left: -4px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }.stat:nth-child(2) { border-right: 0; }.stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
    .service-grid, .news-grid { grid-template-columns: 1fr; }.staff-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }.section { padding: 58px 0; }.section-head { align-items: start; flex-direction: column; }
    .install-brand { padding: 36px 28px; }.install-brand h1 { font-size: 2.3rem; }.install-card { padding: 30px 24px; }
    .form-grid, .admin-form-grid { grid-template-columns: 1fr; }.span-2, .admin-form-grid .full { grid-column: auto; }
    .admin-layout { display: block; }.admin-sidebar { position: fixed; z-index: 300; left: -290px; width: 270px; transition: left .2s ease; }.admin-sidebar.open { left: 0; }.admin-mobile-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.admin-topbar { padding: 0 16px; }.admin-content { padding: 20px 16px; }.metric-grid { grid-template-columns: 1fr 1fr; }.admin-page-head { align-items: start; flex-direction: column; }
}

@media (max-width: 520px) {
    .container { width: min(calc(100% - 24px), var(--container)); }.hero-copy h1 { font-size: 2.75rem; }.hero-panel { padding: 26px; border-radius: 30px; }.health-orbit { width: 150px; height: 150px; }.floating-note { width: 180px; }
    .quick-grid, .staff-grid, .gallery-grid, .feature-actions { grid-template-columns: 1fr; }.quick-card { min-height: 170px; }.footer-bottom, .download-item { align-items: start; flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr; }.login-card { padding: 28px 22px; }.admin-user small { display: none; }
}

.js-reveal .reveal-item { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.js-reveal .reveal-item.in-view { opacity: 1; transform: none; }
.js-reveal .reveal-item.reveal-d1 { transition-delay: 70ms; }
.js-reveal .reveal-item.reveal-d2 { transition-delay: 140ms; }
.js-reveal .reveal-item.reveal-d3 { transition-delay: 210ms; }
.js-reveal .reveal-item.reveal-d4 { transition-delay: 280ms; }
.js-reveal .reveal-item.reveal-d5 { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    .js-reveal .reveal-item { opacity: 1 !important; transform: none !important; }
}