@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');

.template-home-portal .container {
  max-width: 1180px;
}

.template-home-portal .site-main {
  padding-top: 86px !important;
}

.template-home-portal .site-main .container {
  position: relative;
  z-index: 2;
}

.template-home-portal .site-shell {
  padding-bottom: 28px;
}

.template-home-portal {
  --portal-bg1: #0b1221;
  --portal-bg2: #16273f;
  --portal-ink: #eaf2ff;
  --portal-muted: rgba(222, 235, 255, 0.82);
  --portal-line: rgba(166, 200, 245, 0.24);
  --portal-card: rgba(20, 31, 52, 0.74);
  --portal-glow: rgba(83, 160, 255, 0.24);
}

.template-home-portal .site-main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(58, 120, 233, 0.20), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(52, 193, 174, 0.18), transparent 58%),
    linear-gradient(160deg, var(--portal-bg1), var(--portal-bg2));
}

.portal-hero,
.portal-grid-section,
.portal-architecture {
  border: 1px solid var(--portal-line);
  border-radius: 24px;
  background: var(--portal-card);
  backdrop-filter: blur(8px);
}

.portal-hero {
  padding: 30px 30px 24px;
  box-shadow: 0 20px 48px rgba(3, 8, 20, 0.36);
}

.portal-kicker {
  margin: 0;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(203, 223, 255, 0.86);
}

.portal-hero h1 {
  margin: 10px 0 0;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-size: clamp(34px, 5.1vw, 58px);
  line-height: 1.04;
  color: var(--portal-ink);
}

.portal-subtitle {
  margin: 14px 0 0;
  max-width: 860px;
  color: var(--portal-muted);
  line-height: 1.8;
  font-size: 16px;
}

.portal-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-btn {
  text-decoration: none;
  border: 1px solid rgba(160, 196, 246, 0.4);
  border-radius: 999px;
  padding: 9px 14px;
  color: #e8f2ff;
  background: rgba(145, 181, 229, 0.12);
  font-weight: 600;
  font-size: 14px;
}

.portal-btn:hover {
  text-decoration: none;
  background: rgba(145, 181, 229, 0.2);
}

.portal-btn.primary {
  border-color: rgba(132, 187, 255, 0.82);
  background: rgba(95, 156, 241, 0.34);
}

.portal-metrics {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric-item {
  border: 1px solid rgba(163, 202, 255, 0.18);
  border-radius: 16px;
  background: rgba(14, 24, 41, 0.6);
  padding: 12px 14px;
}

.metric-value {
  display: block;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #d9ecff;
}

.metric-label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(204, 223, 247, 0.8);
}

.portal-grid-section,
.portal-architecture {
  margin-top: 16px;
  padding: 20px;
}

.section-head h2 {
  margin: 0;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-size: 28px;
  color: #edf5ff;
}

.section-head p {
  margin: 8px 0 0;
  color: rgba(210, 229, 251, 0.82);
}

.site-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.site-card {
  border: 1px solid rgba(168, 201, 244, 0.2);
  border-radius: 18px;
  padding: 16px;
  background: rgba(17, 27, 46, 0.72);
}

.site-card.blog { box-shadow: inset 0 0 0 1px rgba(154, 182, 255, 0.14); }
.site-card.math { box-shadow: inset 0 0 0 1px rgba(102, 203, 170, 0.16); }
.site-card.algo { box-shadow: inset 0 0 0 1px rgba(126, 173, 255, 0.16); }
.site-card.ai { box-shadow: inset 0 0 0 1px rgba(255, 183, 110, 0.16); }
.site-card.word { box-shadow: inset 0 0 0 1px rgba(124, 215, 171, 0.18); }
.site-card.game { box-shadow: inset 0 0 0 1px rgba(255, 145, 178, 0.16); }

.site-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.site-card h3 {
  margin: 0;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-size: 24px;
  color: #e8f3ff;
}

.site-chip {
  border-radius: 999px;
  border: 1px solid rgba(162, 196, 243, 0.32);
  padding: 4px 10px;
  font-size: 12px;
  color: rgba(219, 235, 255, 0.86);
  background: rgba(123, 166, 234, 0.14);
}

.site-card p {
  margin: 10px 0 0;
  color: rgba(213, 228, 248, 0.87);
  line-height: 1.7;
}

.site-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.site-card li {
  margin: 6px 0;
  color: rgba(209, 227, 255, 0.84);
}

.site-card a {
  color: #cbe4ff;
}

.site-link {
  display: inline-flex;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 700;
  color: #9ad1ff !important;
}

.site-link:hover {
  text-decoration: none;
  color: #bce4ff !important;
}

.flow-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.flow-grid article {
  border: 1px solid rgba(168, 201, 244, 0.2);
  border-radius: 16px;
  background: rgba(16, 25, 42, 0.66);
  padding: 14px;
}

.flow-grid h3 {
  margin: 0;
  font-size: 17px;
  color: #d7e9ff;
}

.flow-grid p {
  margin: 8px 0 0;
  color: rgba(210, 229, 251, 0.84);
  line-height: 1.75;
}

:root[data-theme='light'] .template-home-portal {
  --portal-ink: #122f53;
  --portal-muted: rgba(22, 54, 92, 0.86);
  --portal-line: rgba(65, 100, 148, 0.22);
  --portal-card: rgba(245, 250, 255, 0.86);
  --portal-glow: rgba(62, 141, 241, 0.2);
}

:root[data-theme='light'] .template-home-portal .site-main::before {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(88, 157, 246, 0.23), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(45, 185, 168, 0.2), transparent 58%),
    linear-gradient(160deg, #edf3fb, #dce8f7);
}

:root[data-theme='light'] .portal-hero,
:root[data-theme='light'] .portal-grid-section,
:root[data-theme='light'] .portal-architecture,
:root[data-theme='light'] .site-card,
:root[data-theme='light'] .metric-item,
:root[data-theme='light'] .flow-grid article {
  color: #153960;
}

:root[data-theme='light'] .portal-btn {
  color: #174673;
  border-color: rgba(64, 105, 161, 0.36);
  background: rgba(95, 146, 212, 0.12);
}

:root[data-theme='light'] .portal-btn.primary {
  color: #0d3f70;
  border-color: rgba(71, 126, 206, 0.74);
  background: rgba(79, 143, 238, 0.22);
}

@media (max-width: 1020px) {
  .portal-metrics,
  .flow-grid {
    grid-template-columns: 1fr;
  }

  .site-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .portal-hero,
  .portal-grid-section,
  .portal-architecture {
    border-radius: 16px;
  }

  .portal-hero {
    padding: 20px 16px 16px;
  }

  .portal-grid-section,
  .portal-architecture {
    padding: 14px;
  }
}


/* ===== 2026-02-11 Theme Color Tuning ===== */
.template-home-portal {
  --site-accent: var(--site-accent, #74b6ff);
  --site-accent-soft: var(--site-accent-soft, #5aa3ff);
  --site-accent-ink: var(--site-accent-ink, #dff0ff);
}

.portal-kicker {
  color: color-mix(in srgb, var(--site-accent) 58%, #eaf2ff 42%);
}

.portal-btn {
  border-color: color-mix(in srgb, var(--site-accent) 56%, #b8d8ff 44%);
  color: var(--site-accent-ink);
}

.portal-btn.primary {
  border-color: color-mix(in srgb, var(--site-accent) 72%, #cbe4ff 28%);
  background: color-mix(in srgb, var(--site-accent) 30%, transparent);
}

.site-chip {
  border-color: color-mix(in srgb, var(--site-accent) 50%, #b9d8ff 50%);
  color: var(--site-accent-ink);
  background: color-mix(in srgb, var(--site-accent) 18%, transparent);
}

.site-link {
  color: color-mix(in srgb, var(--site-accent) 74%, #cde6ff 26%) !important;
}

:root[data-theme='light'] .template-home-portal {
  --portal-ink: #0f325f;
  --portal-muted: rgba(21, 52, 90, 0.92);
  --portal-line: rgba(53, 87, 135, 0.30);
  --portal-card: rgba(248, 252, 255, 0.93);
}

:root[data-theme='light'] .portal-kicker {
  color: color-mix(in srgb, var(--site-accent) 66%, #36516f 34%);
}

:root[data-theme='light'] .section-head h2 {
  color: #163c6f;
}

:root[data-theme='light'] .section-head p {
  color: rgba(21, 52, 90, 0.86);
}

:root[data-theme='light'] .site-card {
  background: rgba(237, 244, 253, 0.95);
  border-color: rgba(67, 102, 151, 0.26);
}

:root[data-theme='light'] .site-card h3 {
  color: #173d6c;
}

:root[data-theme='light'] .site-card p,
:root[data-theme='light'] .site-card li {
  color: rgba(24, 54, 92, 0.88);
}

:root[data-theme='light'] .site-card a {
  color: #1f558f;
}

:root[data-theme='light'] .metric-item {
  background: rgba(226, 236, 248, 0.96);
  border-color: rgba(67, 100, 145, 0.30);
}

:root[data-theme='light'] .metric-value {
  color: #173f72;
}

:root[data-theme='light'] .metric-label {
  color: rgba(25, 56, 94, 0.86);
}

:root[data-theme='light'] .flow-grid article {
  background: rgba(232, 241, 252, 0.96);
  border-color: rgba(67, 100, 145, 0.30);
}

:root[data-theme='light'] .flow-grid h3 {
  color: #173f72;
}

:root[data-theme='light'] .flow-grid p {
  color: rgba(24, 55, 94, 0.88);
}

:root[data-theme='light'] .portal-btn {
  color: #103a68;
  border-color: color-mix(in srgb, var(--site-accent) 44%, #6388b3 56%);
  background: color-mix(in srgb, var(--site-accent) 12%, #ffffff 88%);
}

:root[data-theme='light'] .portal-btn.primary {
  color: #0a315a;
  border-color: color-mix(in srgb, var(--site-accent) 60%, #4f709a 40%);
  background: color-mix(in srgb, var(--site-accent) 22%, #ffffff 78%);
}

:root[data-theme='light'] .site-link {
  color: color-mix(in srgb, var(--site-accent) 75%, #245082 25%) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .section-head h2 { color: #163c6f; }
  :root:not([data-theme='dark']) .section-head p { color: rgba(21, 52, 90, 0.86); }
  :root:not([data-theme='dark']) .metric-item {
    background: rgba(226, 236, 248, 0.96);
    border-color: rgba(67, 100, 145, 0.30);
  }
  :root:not([data-theme='dark']) .metric-value { color: #173f72; }
  :root:not([data-theme='dark']) .metric-label { color: rgba(25, 56, 94, 0.86); }
  :root:not([data-theme='dark']) .flow-grid article {
    background: rgba(232, 241, 252, 0.96);
    border-color: rgba(67, 100, 145, 0.30);
  }
  :root:not([data-theme='dark']) .flow-grid h3 { color: #173f72; }
  :root:not([data-theme='dark']) .flow-grid p { color: rgba(24, 55, 94, 0.88); }
}