:root {
  --portal-blue: #6d28d9;
  --portal-blue-dark: #4c1d95;
  --portal-navy: #24123d;
  --portal-orange: #7c3aed;
  --portal-red: #b83280;
  --portal-green: #43b883;
  --portal-ink: #2b2142;
  --portal-muted: #776c8d;
  --portal-line: #e8e0f2;
  --portal-bg: #f6f3fa;
  --portal-card: #fff;
  --portal-shadow: 0 14px 40px rgba(51, 25, 90, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--portal-bg);
  color: var(--portal-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.portal-topline {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  background: var(--portal-navy);
  color: #eaf3ff;
  font-size: 11px;
  text-align: center;
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 18px rgba(31,53,78,.08);
  backdrop-filter: blur(14px);
}

.portal-header-main,
.portal-nav-inner,
.portal-container,
.portal-footer-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.portal-header-main {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.portal-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--portal-blue-dark);
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.03em;
}

.portal-logo-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 9px 22px rgba(109,40,217,.25);
  font-size: 21px;
}

.portal-header-search {
  max-width: 580px;
  flex: 1;
  display: flex;
  overflow: hidden;
  border: 1px solid #d6dce4;
  border-radius: 8px;
  background: #fff;
}

.portal-header-search input {
  min-width: 0;
  flex: 1;
  height: 46px;
  padding: 0 18px;
  border: 0;
  outline: 0;
  color: var(--portal-ink);
}

.portal-header-search button {
  min-width: 138px;
  border: 0;
  background: var(--portal-blue);
  color: #fff;
  cursor: pointer;
  font-weight: 760;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-nav {
  background: #4b1a8f;
  color: #fff;
}

.portal-nav-inner {
  min-height: 58px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.portal-nav-inner::-webkit-scrollbar { display: none; }

.portal-nav-link {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 760;
  transition: background 160ms ease, transform 160ms ease;
}

.portal-nav-link:hover,
.portal-nav-link:focus-visible,
.portal-nav-link.is-active {
  background: #6422bb;
  outline: none;
}

.portal-main { padding: 34px 0 70px; }
.portal-container { position: relative; }

.portal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: var(--portal-muted);
  font-size: 11px;
}

.portal-hero {
  position: relative;
  overflow: hidden;
  padding: 54px;
  border-radius: 16px;
  background: #211438;
  color: #fff;
  box-shadow: var(--portal-shadow);
}

.portal-hero::before,
.portal-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.portal-hero::before { width: 210px; height: 210px; top: -70px; right: 12%; }
.portal-hero::after { width: 130px; height: 130px; right: -20px; bottom: -38px; }

.portal-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #bb9cff;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.portal-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.portal-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(239,246,255,.78);
  font-size: 14px;
  line-height: 1.85;
}

.portal-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.portal-button {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--portal-blue);
  color: #fff;
  cursor: pointer;
  font-weight: 760;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.portal-button:hover,
.portal-button:focus-visible {
  box-shadow: 0 10px 26px rgba(109,40,217,.28);
  filter: brightness(1.04);
  outline: none;
  transform: translateY(-2px);
}

.portal-button:active { transform: translateY(1px) scale(.985); }
.portal-button.orange { background: #6d28d9; }
.portal-button.dark { background: #6d28d9; }
.portal-button.light { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.portal-header .portal-button.light { border-color: #dfd3f0; background: #fff; color: #5a2b9d; }

.portal-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  pointer-events: none;
  transform: scale(0);
  animation: portal-ripple 560ms ease-out forwards;
}

@keyframes portal-ripple { to { opacity: 0; transform: scale(3.8); } }

.portal-section { margin-top: 28px; }
.portal-card {
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: var(--portal-card);
  box-shadow: var(--portal-shadow);
}

.portal-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.portal-section-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.portal-section-heading p { margin: 0; color: var(--portal-muted); font-size: 11px; }

.portal-grid { display: grid; gap: 18px; }
.portal-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.portal-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.portal-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.portal-info-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--portal-line);
  border-radius: 13px;
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.portal-info-card:hover,
.portal-info-card:focus-within {
  border-color: #b8d7fa;
  box-shadow: 0 15px 36px rgba(35,79,124,.13);
  transform: translateY(-5px);
}

.portal-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #718096, #4b586c);
  color: #fff;
  box-shadow: 0 10px 24px rgba(52,68,91,.2);
  font-size: 24px;
  font-weight: 850;
}
.portal-icon.blue { background: linear-gradient(145deg, #51a1f8, #2e6bc1); }
.portal-icon.orange { background: linear-gradient(145deg, #ffab43, #f16d2d); }
.portal-icon.red { background: linear-gradient(145deg, #ff6657, #ef3128); }
.portal-icon.pink { background: linear-gradient(145deg, #f35dab, #de2784); }
.portal-icon.gold { background: linear-gradient(145deg, #ffcf48, #e6a91a); }

.portal-info-card h3 { margin: 18px 0 0; font-size: 18px; }
.portal-info-card p { margin: 10px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.8; }

.portal-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border-bottom: 1px solid var(--portal-line);
}

.portal-filter-button {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  background: #fff;
  color: #576274;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.portal-filter-button:hover { transform: translateY(-1px); }
.portal-filter-button.is-active { border-color: var(--portal-orange); background: var(--portal-orange); color: #fff; }

.portal-search {
  min-width: 260px;
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  outline: none;
}
.portal-search:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

.portal-empty { padding: 56px 24px; color: var(--portal-muted); text-align: center; }
.portal-reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
.portal-reveal.is-visible { opacity: 1; transform: none; }

.portal-footer { margin-top: 50px; border-top: 1px solid #dce2e9; background: #e8ecf1; }
.portal-footer-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--portal-muted); font-size: 10px; }
.portal-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 960px) {
  .portal-header-search { display: none; }
  .portal-grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-grid.cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .portal-header-main,.portal-nav-inner,.portal-container,.portal-footer-inner { width: min(100% - 24px,1180px); }
  .portal-header-main { min-height: 64px; }
  .portal-logo { font-size: 18px; }
  .portal-logo-mark { width: 38px; height: 38px; }
  .portal-header-actions .portal-button:not(.dark) { display: none; }
  .portal-nav-link { padding: 0 16px; font-size: 12px; }
  .portal-main { padding-top: 20px; }
  .portal-hero { padding: 32px 24px; border-radius: 12px; }
  .portal-grid.cols-4,.portal-grid.cols-3,.portal-grid.cols-2 { grid-template-columns: 1fr; }
  .portal-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .portal-footer-inner { min-height: 118px; align-items: flex-start; flex-direction: column; justify-content: center; }
}

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