/* ═══════════════════════
   COLOR TOKENS — BLUE (IT / TECH) THEME
═══════════════════════ */
:root {
  /* 主色 */
  --c-blue:        #1a56b0;   /* 導覽列藍色 */
  --c-blue-dark:   #0d3a80;   /* hover / 深藍 */
  --c-blue-light:  #e8f1fc;   /* 淡藍背景 */
  --c-blue-border: #a9cdf2;   /* 藍色邊框 */
  /* 文字 */
  --c-title:       #16233a;   /* 標題深藍黑 */
  --c-text:        #2b3440;
  --c-muted:       #5c6773;
  --c-link:        #1a56b0;
  /* 介面 */
  --c-bg:          #f4f8fc;   /* 頁面底色 (淡藍底) */
  --c-surface:     #ffffff;
  --c-border:      #d7e3f0;
  /* Header & Nav */
  --c-header-bg:   #ffffff;
  --c-nav-bg:      #123c73;
  --c-nav-fg:      #ffffff;
  --c-nav-hover:   #0d2f5c;
  --c-nav-border:  #2f6fb5;
  /* Section accents */
  --c-tab-act:     #1a56b0;
  --c-tag-bg:      #e8f1fc;
  --c-tag-fg:      #1a56b0;
  /* Footer */
  --c-footer-bg:   #0b1f3a;
  --c-footer-fg:   #c3d7f0;
  /* Gallery / button */
  --c-btn:         #1a56b0;
  --c-btn-hover:   #0d3a80;
}

/* ═══════════════════════
   RESET
═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif;
  font-size: 15px; line-height: 1.7;
  color: var(--c-text); background: var(--c-bg);
  overflow-x: hidden;
}
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.skip-link {
  position: absolute; top: -60px; left: 0;
  background: var(--c-blue); color: #fff;
  padding: 8px 16px; font-size: 14px; z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════
   HEADER
   (logo left + utility links right, all one row)
═══════════════════════ */
.site-header {
  background: var(--c-header-bg);
  background-image: radial-gradient(circle, #bcd9f7 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  border-bottom: 3px solid var(--c-blue);
  box-shadow: 0 2px 6px rgba(26,86,176,.12);
}
.site-header-inner {
  max-width: 1200px; margin-inline: auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
}
/* LOGO */
.logo-link { flex-shrink: 0; display: block; }
.logo-img {
  width: 92px; height: 92px; border-radius: 50%;
  object-fit: contain; display: block;
  box-shadow: 0 2px 8px rgba(26,86,176,.3);
}
/* Title block */
.site-title { flex: 1; }
.site-title h1 {
  font-size: 30px; font-weight: 700; color: var(--c-title);
  line-height: 1.25; letter-spacing: .02em;
}
.site-title p { font-size: 13px; color: var(--c-muted); margin-top: 5px; }
/* Utility links – top right of header */
.header-links {
  display: flex; align-items: center; gap: 0;
  margin-left: auto; flex-shrink: 0;
}
.header-links a {
  font-size: 15px; color: var(--c-muted);
  padding: 3px 12px;
  border-right: 1px solid var(--c-border);
  white-space: nowrap;
}
.header-links a:first-child { border-left: 1px solid var(--c-border); }
.header-links a:hover { color: var(--c-blue); text-decoration: none; }
/* Mobile: hide links in header, show in nav */
@media (max-width: 860px) {
  .header-links { display: none; }
  .site-title h1 { font-size: 21px; }
}

/* ═══════════════════════
   MAIN NAV
═══════════════════════ */
.main-nav {
  background: var(--c-nav-bg);
  position: relative; z-index: 200;
}
.nav-inner {
  max-width: 1200px; margin-inline: auto;
  padding-inline: 10px;
  display: flex; align-items: stretch;
}
.nav-list { display: flex; }
.nav-item { position: relative; }
.nav-item > a,
.nav-item > button {
  display: flex; align-items: center; gap: 5px;
  padding: 16px 26px;
  color: var(--c-nav-fg);
  font-size: 17px; font-weight: 500; font-family: inherit;
  background: none; border: none; cursor: pointer;
  white-space: nowrap; transition: background .15s;
  text-decoration: none; letter-spacing: .02em;
}
.nav-item > a:hover,
.nav-item > button:hover,
.nav-item.active > a,
.nav-item.active > button {
  background: var(--c-nav-hover);
  text-decoration: none;
}
.nav-item > button .ch { font-size: 12px; transition: transform .2s; }
.nav-item.open > button .ch { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 185px;
  box-shadow: 0 4px 18px rgba(26,86,176,.2);
  border-top: 3px solid var(--c-blue); z-index: 300;
}
.nav-item.open .dropdown { display: block; }
.dropdown li a {
  display: block; padding: 9px 18px; font-size: 13.5px;
  color: var(--c-text); border-bottom: 1px solid var(--c-border);
  transition: background .12s;
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover {
  background: var(--c-blue-light); color: var(--c-blue); text-decoration: none;
}

/* Mobile hamburger */
.nav-toggle {
  display: none; padding: 10px 16px;
  color: #fff; font-size: 24px;
  background: none; border: none; cursor: pointer; margin-left: auto;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-list { flex-direction: column; display: none; width: 100%; }
  .nav-list.open { display: flex; }
  .nav-inner { flex-wrap: wrap; padding-inline: 0; }
  .nav-item > a, .nav-item > button { padding-left: 20px; }
  .dropdown {
    position: static; box-shadow: none; border-top: none;
    border-left: 4px solid var(--c-blue-border);
    background: rgba(255,255,255,.08);
  }
  .dropdown li a { color: #fff; border-color: rgba(255,255,255,.15); padding-left: 36px; }
  .dropdown li a:hover { background: rgba(255,255,255,.12); color: #fff; }
  /* Mobile utility links */
  .mobile-util { display: flex; flex-wrap: wrap; }
  .mobile-util a {
    font-size: 15px; color: rgba(255,255,255,.75);
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: block; width: 50%;
  }
}
.mobile-util { display: none; }

/* ═══════════════════════
   BANNER / SLIDESHOW
═══════════════════════ */
.banner-wrap {
  position: relative; overflow: hidden;
  background: #d7e8fb;
  height: 340px; transition: height .3s ease;
}
.slide-track { display: flex; height: 100%; transition: transform .5s ease; will-change: transform; backface-visibility: hidden; }
.slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.slide > img { width: 100%; height: 100%; object-fit: contain; }
/* Arrows */
.slide-prev, .slide-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(26,86,176,.5); color: #fff; border: none; cursor: pointer;
  font-size: 28px; padding: 8px 14px; z-index: 5;
  transition: background .2s; line-height: 1;
}
.slide-prev:hover, .slide-next:hover { background: rgba(13,58,128,.85); }
.slide-prev { left: 0; }
.slide-next { right: 0; }
/* Dots */
.slide-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: none; cursor: pointer; padding: 0;
  transition: background .2s;
}
.dot.active { background: var(--c-blue); }

/* ═══════════════════════
   2-COLUMN CONTENT
═══════════════════════ */
.content-wrap {
  max-width: 1200px; margin-inline: auto;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 30px; align-items: start;
}
@media (max-width: 860px) { .content-wrap { grid-template-columns: 1fr; } }

/* ── Section heading ── */
.section-heading {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.section-heading h2 {
  font-size: 22px; font-weight: 700; color: var(--c-title);
}
.section-heading .hicon { font-size: 22px; }

/* ── Tab nav ── */
.tab-nav {
  display: flex; flex-wrap: wrap;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 14px;
}
.tab-nav button {
  padding: 7px 15px; font-size: 13.5px; font-weight: 500;
  font-family: inherit; background: none; border: none; cursor: pointer;
  color: var(--c-muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.tab-nav button:hover { color: var(--c-blue); }
.tab-nav button.active {
  color: var(--c-tab-act); border-bottom-color: var(--c-tab-act); font-weight: 600;
}
.tab-nav button:disabled {
  cursor: default; color: var(--c-muted);
}
.tab-nav button:disabled:hover { color: var(--c-muted); }

/* ── News list ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.news-list { list-style: none; }
.news-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 12px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid var(--c-border); font-size: 13.5px;
}
.news-item:last-child { border-bottom: none; }
.news-item a { color: var(--c-text); line-height: 1.5; }
.news-item a:hover { color: var(--c-blue); text-decoration: none; }
.news-date {
  font-size: 12.5px; color: var(--c-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px;
}
.more-link {
  display: block; text-align: right; margin-top: 10px;
  font-size: 13px; color: var(--c-blue); font-weight: 500;
}
.more-link:hover { text-decoration: underline; }

/* ── Right column: side banners ── */
.side-banners { display: flex; flex-direction: column; gap: 10px; }
.side-banner {
  display: block; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
  transition: box-shadow .15s, transform .15s;
}
.side-banner:hover {
  box-shadow: 0 4px 14px rgba(26,86,176,.2);
  transform: translateY(-2px); text-decoration: none;
}
.side-banner-img-wrap {
  width: 100%; aspect-ratio: 5/3;
  overflow: hidden; position: relative;
  background: var(--c-blue-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}
.side-banner-img-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sb-1 .side-banner-img-wrap { background: #dbe9fb; }
.sb-2 .side-banner-img-wrap { background: #e8f4fb; }
.sb-3 .side-banner-img-wrap { background: #e3e9fb; }
.sb-4 .side-banner-img-wrap { background: #d6eaf8; }
.side-banner-label {
  padding: 6px 11px; font-size: 12.5px; font-weight: 500; color: var(--c-muted);
  background: #fff; border-top: 1px solid var(--c-border);
}

/* ═══════════════════════
   GALLERY SECTION
═══════════════════════ */
.gallery-section { background: var(--c-surface); padding-block: 28px 32px; }
.gallery-inner { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.gallery-track-wrap { overflow: hidden; }
.gallery-track { display: flex; gap: 12px; transition: transform .4s ease; }
.gallery-card {
  flex: 0 0 calc(25% - 9px); width: calc(25% - 9px); background: var(--c-bg);
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
}
.gallery-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.gc-1 .gallery-card-img { background: #dbe9fb; }
.gc-2 .gallery-card-img { background: #e8f4fb; }
.gc-3 .gallery-card-img { background: #e3e9fb; }
.gc-4 .gallery-card-img { background: #d6eaf8; }
.gc-5 .gallery-card-img { background: #e6e6fa; }
.gc-6 .gallery-card-img { background: #e0f7fa; }
.gallery-card-img img { width: 100%; height: 100%; object-fit: cover; }
.gallery-card-title {
  padding: 7px 10px; font-size: 12.5px; color: var(--c-muted); line-height: 1.4;
}
.gallery-controls {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-top: 14px;
}
.garrow {
  background: var(--c-blue); color: #fff;
  border: none; padding: 6px 20px; border-radius: 20px;
  cursor: pointer; font-size: 18px; transition: background .15s; line-height: 1;
}
.garrow:hover { background: var(--c-blue-dark); }
.gallery-dots-inner { display: flex; gap: 6px; }
.gdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border); border: none; cursor: pointer; padding: 0;
  transition: background .2s;
}
.gdot.active { background: var(--c-blue); }
@media (max-width: 640px) { .gallery-card { flex-basis: calc(50% - 6px); width: calc(50% - 6px); } }

/* ═══════════════════════
   ABOUT SECTION
═══════════════════════ */
.about-section {
  padding-block: 40px;
  background: linear-gradient(180deg, var(--c-blue-light) 0%, #fff 60%);
}
.about-inner { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.about-heading { text-align: center; margin-bottom: 22px; }
.about-heading h2 {
  font-size: 26px; font-weight: 700; color: var(--c-title);
  display: inline-block;
  border-bottom: 3px solid var(--c-blue); padding-bottom: 8px;
}
.about-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 20px;
}
.about-tag {
  background: #fff; color: var(--c-blue);
  border: 2px solid var(--c-blue); border-radius: 20px;
  padding: 4px 16px; font-size: 13px; font-weight: 700;
}
.about-text {
  font-size: 14.5px; line-height: 2; color: var(--c-text);
  max-width: 820px; margin-inline: auto; text-align: justify;
}

/* ═══════════════════════
   VIDEO SECTION
═══════════════════════ */
.video-section { background: var(--c-surface); padding-block: 32px; }
.video-inner { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
  transition: box-shadow .15s, transform .15s;
}
.video-card:hover { box-shadow: 0 4px 16px rgba(26,86,176,.2); transform: translateY(-2px); }
.video-thumb-wrap {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #bcd9f7 0%, #a8d8e8 100%);
  overflow: hidden;
}
.video-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2);
}
.play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; padding-left: 4px;
  transition: transform .2s;
}
.video-card:hover .play-btn { transform: scale(1.1); }
.video-meta { padding: 10px 12px; background: #fff; }
.video-title { font-size: 13px; font-weight: 600; color: var(--c-text); line-height: 1.4; }
.video-channel { font-size: 11.5px; color: var(--c-muted); margin-top: 3px; }

/* ═══════════════════════
   GENERIC SUB-PAGE CONTENT
   (for pages that just show a single image / block of content
    below the nav, above the footer)
═══════════════════════ */
.page-content {
  max-width: 1000px; margin-inline: auto;
  padding: 40px 20px 60px;
}
.page-content img { margin-inline: auto; border-radius: 6px; }

/* ── Breadcrumb ── */
.breadcrumb {
  max-width: 1200px; margin-inline: auto;
  padding: 16px 20px 0; font-size: 13px; color: var(--c-muted);
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-blue); }

/* ── Message page (籌備主任的話 等：照片 + 文字) ── */
.message-section { max-width: 1200px; margin-inline: auto; padding: 18px 20px 60px; }
.message-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 700; color: var(--c-title);
  border-left: 4px solid var(--c-blue); padding-left: 12px;
  margin-bottom: 26px;
}
.message-layout {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 40px; align-items: start;
}
@media (max-width: 760px) { .message-layout { grid-template-columns: 1fr; } }
.message-photo img {
  width: 100%; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(26,86,176,.18);
}
.message-text p {
  margin-bottom: 18px; line-height: 2; text-align: justify;
  color: var(--c-text); font-size: 14.5px;
}
.message-signoff { text-align: right; margin-top: 6px; }

/* ── Plain text page (緣起、教育目標 等：單欄文字) ── */
.text-section { max-width: 1000px; margin-inline: auto; padding: 18px 20px 60px; }
.text-body p {
  margin-bottom: 18px; line-height: 2; text-align: justify;
  color: var(--c-text); font-size: 14.5px;
}
.text-body h3 {
  font-size: 16px; font-weight: 700; color: var(--c-blue);
  margin: 28px 0 10px;
}
.text-body h3:first-child { margin-top: 0; }
.text-body h4 {
  font-size: 14.5px; font-weight: 700; color: var(--c-title);
  margin: 18px 0 6px;
}
.text-body ul, .text-body ol {
  margin: 0 0 18px; padding-left: 22px;
  line-height: 2; color: var(--c-text); font-size: 14.5px;
}
.text-body li { margin-bottom: 4px; }

/* ── Staff list (系辦人員 等聯絡卡片) ── */
.staff-list { display: flex; flex-direction: column; gap: 16px; }
.staff-card {
  border: 1px solid var(--c-border); border-radius: 8px;
  padding: 16px 20px; background: var(--c-surface);
}
.staff-name { font-size: 16px; font-weight: 700; color: var(--c-title); }
.staff-title { font-size: 13px; color: var(--c-muted); margin-top: 2px; margin-bottom: 8px; }
.staff-contact { font-size: 14px; color: var(--c-text); }
.staff-contact a { color: var(--c-blue); }

/* ── Member profile (籌備主任 等個人資料頁) ── */
.profile-layout {
  display: grid; grid-template-columns: 230px 1fr;
  gap: 32px; align-items: start;
}
@media (max-width: 640px) { .profile-layout { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; } }
.profile-photo img { width: 100%; border-radius: 6px; object-fit: cover; }
.profile-name { font-size: 20px; font-weight: 700; color: var(--c-title); }
.profile-title { font-size: 14px; color: var(--c-muted); margin: 4px 0 18px; }
.profile-title a { color: var(--c-blue); }
.profile-field {
  display: flex; gap: 10px; font-size: 14px; line-height: 1.9; color: var(--c-text);
}
.profile-field .pf-label { flex-shrink: 0; width: 80px; color: var(--c-muted); }
.profile-field .pf-value { flex: 1; }
.profile-field .pf-value a { color: var(--c-blue); }

/* ── Faculty list (授課教師 等：卡片 + 可展開經歷) ── */
.faculty-list { display: flex; flex-direction: column; gap: 22px; }
.faculty-card {
  display: flex; gap: 28px;
  border: 1px solid var(--c-border); border-radius: 10px;
  padding: 22px 24px; background: var(--c-surface);
  box-shadow: 0 2px 8px rgba(26,86,176,.06);
}
@media (max-width: 640px) { .faculty-card { flex-direction: column; gap: 16px; } }
.faculty-photo img, .faculty-photo-placeholder {
  width: 190px; height: 190px; border-radius: 8px; flex-shrink: 0;
  object-fit: cover; object-position: center top;
}
.faculty-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; background: var(--c-blue-light); color: var(--c-blue);
}
@media (max-width: 640px) {
  .faculty-photo img, .faculty-photo-placeholder { width: 100%; height: auto; aspect-ratio: 1; }
}
.faculty-info { flex: 1; min-width: 0; }
.faculty-name-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.faculty-name-row .f-name { font-size: 18px; font-weight: 700; color: var(--c-title); }
.faculty-name-row a { font-size: 13px; color: var(--c-blue); }
.faculty-line { font-size: 14px; color: var(--c-text); line-height: 1.9; }
.faculty-line .f-label { color: var(--c-muted); }
.faculty-accordion { margin-top: 12px; border-top: 1px dashed var(--c-border); }
.faculty-accordion-item { border-bottom: 1px dashed var(--c-border); }
.faculty-accordion-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: none; padding: 10px 0;
  font-size: 14px; color: var(--c-blue); cursor: pointer; font-family: inherit;
  text-align: left;
}
.faculty-accordion-toggle .plus { transition: transform .2s; font-size: 15px; }
.faculty-accordion-item.open .faculty-accordion-toggle .plus { transform: rotate(45deg); }
.faculty-accordion-body {
  display: none; padding: 0 0 14px;
  font-size: 13.5px; color: var(--c-text); line-height: 1.9;
}
.faculty-accordion-item.open .faculty-accordion-body { display: block; }

/* ═══════════════════════
   FOOTER
═══════════════════════ */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-fg); padding-block: 32px 0; }
.footer-inner { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.footer-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px 40px; padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-logo-icon {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: contain; flex-shrink: 0; display: block;
}
.footer-school { font-size: 15px; font-weight: 700; color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 8px; }
.fci { width: 18px; flex-shrink: 0; text-align: center; font-size: 13px; opacity: .65; margin-top: 2px; }
.footer-social { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 640px) { .footer-social { align-items: flex-start; } }
.social-icons { display: flex; gap: 10px; }
.social-icon {
  width: 36px; height: 36px; border-radius: 6px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--c-footer-fg);
  transition: background .15s; text-decoration: none;
}
.social-icon:hover { background: var(--c-blue); color: #fff; text-decoration: none; }
.counter-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.5); }
.counter-digits {
  background: rgba(0,0,0,.35); color: #fff;
  padding: 2px 10px; border-radius: 3px;
  font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 2px;
}
.footer-bottom {
  padding: 13px 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.4);
}
.lang-list { display: flex; gap: 10px; }
.lang-list a { color: rgba(255,255,255,.45); font-size: 12px; }
.lang-list a:hover, .lang-list a.active { color: #fff; text-decoration: none; }
.lang-list a.active { font-weight: 700; }