@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}

:root {
  --ink: #0B0B12;
  --panel: #12121d;
  --line: rgba(112, 135, 204, .22);
  --blue: #248BFF;
  --violet: #8B3DFF;
  --paper: #f5f7ff;
  --muted: #a6afc8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  width: 100%;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
}

h1, h2 {
  font-family: 'Bebas Neue', 'Inter', Arial, sans-serif;
  font-weight: 400 !important;
  letter-spacing: .03em;
}

.page-shell {
  width: 100%;
  min-height: calc(100 * min(var(--vh, 1vh), 1vh));
  background:
    radial-gradient(circle at 84% 4%, rgba(139, 61, 255, .16), transparent 24rem),
    radial-gradient(circle at 10% 28%, rgba(36, 139, 255, .11), transparent 27rem),
    #0B0B12;
}

.site-header {
  background: rgba(11, 11, 18, .88);
  border-bottom: 1px solid rgba(135, 151, 204, .16);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 38px;
  height: 27px;
  position: relative;
  border: 2px solid #248BFF;
  border-radius: 12px 12px 9px 9px;
  box-shadow: 0 0 15px rgba(36,139,255,.56), inset 0 0 10px rgba(36,139,255,.18);
  flex: 0 0 auto;
}
.brand-mark::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 3px;
  background: #f5f7ff;
  top: 9px;
  left: 6px;
  box-shadow: 5px -5px 0 -1px #f5f7ff, 5px 5px 0 -1px #f5f7ff;
  border-radius: 3px;
}
.brand-mark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 16px;
  right: 6px;
  top: 3px;
  background: #8B3DFF;
  clip-path: polygon(46% 0, 100% 0, 63% 42%, 93% 42%, 20% 100%, 39% 56%, 8% 56%);
  filter: drop-shadow(0 0 5px #8B3DFF);
}

.nav-link {
  color: #c8cee1;
  font-size: .9rem;
  font-weight: 700;
  transition: color .2s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: #fff; }
.focus-ring:focus-visible {
  outline: 3px solid #248BFF;
  outline-offset: 3px;
  border-radius: 8px;
}

.hero-grid {
  background-image: linear-gradient(rgba(101,124,200,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(101,124,200,.06) 1px, transparent 1px);
  background-size: 54px 54px;
}
.eyebrow { letter-spacing: .17em; text-transform: uppercase; }
.hero-orb {
  position: absolute;
  right: 7%;
  top: 45%;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(36, 139, 255, .26);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(36,139,255,.12), inset 0 0 60px rgba(139,61,255,.08);
  transform: translateY(-50%);
}
.hero-orb::before, .hero-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(139,61,255,.33);
  border-radius: 50%;
  inset: 28px;
}
.hero-orb::after { inset: 65px; border-color: rgba(36,139,255,.5); }

.primary-action, .secondary-action, .category-filter, .guide-link {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.primary-action:hover, .guide-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(36,139,255,.28);
}
.secondary-action:hover {
  transform: translateY(-2px);
  border-color: rgba(139,61,255,.8);
  box-shadow: 0 10px 25px rgba(139,61,255,.16);
}

.search-frame {
  background: rgba(19, 20, 32, .78);
  border: 1px solid var(--line);
  box-shadow: 0 0 35px rgba(36,139,255,.08);
}
.search-frame:focus-within {
  border-color: rgba(36,139,255,.78);
  box-shadow: 0 0 0 4px rgba(36,139,255,.12), 0 0 35px rgba(36,139,255,.16);
}
.search-input {
  background: transparent;
  color: #f5f7ff;
  width: 100%;
  outline: none;
}
.search-input::placeholder { color: #7f89a8; }

.guide-card {
  background: #12121d;
  border: 1px solid rgba(121, 137, 190, .19);
  box-shadow: 0 15px 38px rgba(0,0,0,.22);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.guide-card:hover, .guide-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(36,139,255,.64);
  box-shadow: 0 20px 42px rgba(0,0,0,.4), 0 0 25px rgba(36,139,255,.11);
}
.guide-card img { transition: transform .45s ease, filter .35s ease; }
.guide-card:hover img { transform: scale(1.06); filter: saturate(1.12); }

.category-filter {
  background: rgba(23, 24, 38, .9);
  color: #cbd2e8;
  border: 1px solid rgba(121, 137, 190, .23);
}
.category-filter:hover, .category-filter.is-active {
  color: white;
  background: rgba(36,139,255,.16);
  border-color: #248BFF;
  box-shadow: 0 0 18px rgba(36,139,255,.15);
}

.cta-panel {
  background: linear-gradient(110deg, #14275a 0%, #172057 42%, #4a217d 100%);
  border: 1px solid rgba(131, 169, 255, .33);
  box-shadow: 0 0 52px rgba(36,139,255,.14);
}
.footer-line { border-color: rgba(133, 148, 193, .18); }

.article-content h1, .article-content h2, .article-content h3 {
  font-family: 'Inter', Arial, sans-serif;
}
.article-content h2 { font-size: 1.6rem; font-weight: 700 !important; color: #f5f7ff; margin: 2rem 0 .75rem; }
.article-content h3 { font-size: 1.25rem; font-weight: 700 !important; color: #f5f7ff; margin: 1.5rem 0 .6rem; }
.article-content p { color: #cbd2e8; line-height: 1.75; margin: .9rem 0; }
.article-content ul, .article-content ol { color: #cbd2e8; line-height: 1.75; margin: .9rem 0 .9rem 1.4rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content a { color: #60a5fa; text-decoration: underline; }
.article-content strong { color: #f5f7ff; }
.article-content img { border-radius: 1rem; margin: 1.5rem 0; max-width: 100%; }
.article-content blockquote {
  border-left: 3px solid #248BFF;
  padding: .5rem 0 .5rem 1rem;
  margin: 1.25rem 0;
  color: #a6afc8;
  background: rgba(36,139,255,.06);
}

@media (max-width: 767px) {
  .hero-orb { opacity: .42; right: -100px; }
  .mobile-menu { display: none; }
  .mobile-menu.is-open { display: flex; }
}