/* Hegemon Cassiopeia visual system */
:root {
  --hg-bg-canvas: #08111f;
  --hg-bg-canvas-mid: #0b2a52;
  --hg-bg-canvas-deep: #194a82;
  --hg-surface: rgba(8, 31, 67, 0.78);
  --hg-surface-strong: rgba(13, 42, 84, 0.94);
  --hg-surface-soft: rgba(7, 24, 52, 0.84);
  --hg-border: rgba(110, 202, 255, 0.24);
  --hg-border-strong: rgba(103, 213, 255, 0.52);
  --hg-text: #f3f7fb;
  --hg-text-muted: #c3d6f0;
  --hg-accent: #72e2ff;
  --hg-accent-strong: #21c4ff;
  --hg-accent-secondary: #7b8cff;
  --hg-cta: #ffb347;
  --hg-cta-hover: #ff7a1f;
  --hg-success: #7dffa6;
  --hg-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --hg-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.18);
  --hg-radius-lg: 28px;
  --hg-radius-md: 20px;
  --hg-radius-sm: 14px;
  --hg-content-width: 1280px;
  --hg-grid-line: rgba(92, 200, 255, 0.07);
}

html {
  scroll-behavior: smooth;
}

body.site.modern-template {
  position: relative;
  min-height: 100vh;
  margin: 0;
  font-family: var(--cassiopeia-font-family-body, "Segoe UI Variable Text", "Segoe UI", sans-serif);
  color: var(--hg-text);
  background:
    radial-gradient(circle at 10% 16%, rgba(114, 226, 255, 0.34), transparent 26%),
    radial-gradient(circle at 84% 68%, rgba(75, 102, 255, 0.3), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(255, 179, 71, 0.14), transparent 16%),
    radial-gradient(circle at 50% 110%, rgba(33, 196, 255, 0.12), transparent 28%),
    linear-gradient(135deg, var(--hg-bg-canvas) 0%, var(--hg-bg-canvas-mid) 45%, var(--hg-bg-canvas-deep) 100%);
  background-position: 10% 16%, 84% 68%, 88% 16%, 50% 110%, 0 0;
  background-size: 120% 120%, 120% 120%, 120% 120%, 120% 120%, auto;
  overflow-x: hidden;
  animation: hgAmbientShift 28s ease-in-out infinite alternate;
}

body.site.modern-template::before,
body.site.modern-template::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.site.modern-template::before {
  background-image:
    linear-gradient(var(--hg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hg-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0, 0 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 88%);
  animation: hgGridDrift 36s linear infinite;
}

body.site.modern-template::after {
  background:
    radial-gradient(circle at 18% 20%, rgba(114, 226, 255, 0.12), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(123, 140, 255, 0.1), transparent 36%),
    radial-gradient(circle at center, transparent 38%, rgba(3, 9, 20, 0.24) 100%),
    linear-gradient(180deg, rgba(7, 16, 31, 0.1), rgba(7, 16, 31, 0.28));
  animation: hgGlowDrift 20s ease-in-out infinite alternate;
}

body.site.modern-template > * {
  position: relative;
  z-index: 1;
}

a {
  color: var(--hg-accent);
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

a:hover,
a:focus-visible {
  color: var(--hg-accent-strong);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: var(--cassiopeia-font-family-headings, "Segoe UI Variable Display", "Segoe UI", sans-serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--hg-text);
}

p,
li,
dd,
dt,
span,
small {
  color: var(--hg-text-muted);
}

.header,
main,
.footer-inner {
  width: min(calc(100% - 2rem), var(--hg-content-width));
  margin-inline: auto;
}

.site-shell {
  position: relative;
  padding-bottom: 2rem;
  isolation: isolate;
}

.site-shell::before,
.site-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.7;
}

.site-shell::before {
  top: 8vh;
  left: -8vw;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  background: radial-gradient(circle, rgba(114, 226, 255, 0.34), rgba(114, 226, 255, 0));
  animation: hgOrbDriftLeft 14s ease-in-out infinite alternate;
}

.site-shell::after {
  right: -6vw;
  bottom: 10vh;
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  background: radial-gradient(circle, rgba(123, 140, 255, 0.32), rgba(123, 140, 255, 0));
  animation: hgOrbDriftRight 18s ease-in-out infinite alternate;
}

.site-main {
  position: relative;
}

.page-section {
  position: relative;
}

.layout-shell::before,
.hero-shell::before,
.footer-shell::before {
  content: "";
  position: absolute;
  inset: -0.75rem 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114, 226, 255, 0.3), rgba(123, 140, 255, 0.22), transparent);
  pointer-events: none;
}

.header {
  padding-top: 1rem;
}

.header-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--hg-border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 24, 50, 0.84), rgba(11, 34, 68, 0.78));
  box-shadow: var(--hg-shadow-soft);
  backdrop-filter: blur(18px);
}

.topbar,
.below-top {
  padding-inline: 1rem;
}

.brand-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-mark {
  flex: 0 0 auto;
}

.brand-module {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-module-opposite {
  margin-left: auto;
}

.brand-module > * {
  margin: 0;
}

.brand-module .mod-custom,
.brand-module .custom,
.brand-module p,
.brand-module div {
  margin: 0;
}

.brand-module .mod-custom,
.brand-module .custom,
.brand-module > div,
.brand-module > span,
.brand-module > a {
  display: inline-flex;
  align-items: center;
}

.brand-module,
.brand-module .mod-custom,
.brand-module .custom,
.brand-module .module,
.brand-module .moduletable {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.brand-module .mod-menu,
.brand-module ul,
.brand-module li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.brand-module .mod-menu,
.brand-module ul {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.brand-module a,
.brand-module .mod-menu a,
.brand-module .current > a,
.brand-module .active > a {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #ffd36b;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-decoration-line: none;
}

.brand-module a:hover,
.brand-module a:focus-visible,
.brand-module .current > a:hover,
.brand-module .active > a:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #ffe8a3;
  text-decoration: none;
  text-decoration-line: none;
}

.brand-module *,
.brand-module *::before,
.brand-module *::after {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.brand-module img {
  display: block;
  max-height: 44px;
  width: auto;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--hg-text);
  text-decoration: none;
}

.brand-link__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-link__logo img,
.brand-link__logo .logo {
  width: auto;
  max-height: 44px;
}

.brand-link__text {
  font-family: var(--cassiopeia-font-family-headings, "Segoe UI Variable Display", "Segoe UI", sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.nav .mod-menu,
.nav .navbar,
.nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.48rem 0.82rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--hg-text);
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.nav .mod-menu > li,
.nav ul > li {
  margin: 0;
}

.mod-menu {
  margin: 0;
  padding: 0;
}

.mod-menu > li > a,
.mod-menu a {
  line-height: 1.2;
}

.nav a:hover,
.nav a:focus-visible,
.nav .current > a,
.nav .active > a {
  border-color: var(--hg-border-strong);
  background: linear-gradient(180deg, rgba(114, 226, 255, 0.12), rgba(33, 196, 255, 0.07));
  box-shadow: inset 0 0 0 1px rgba(114, 226, 255, 0.12), 0 0 30px rgba(33, 196, 255, 0.12);
}

.search,
.mod-finder {
  display: flex;
  align-items: center;
}

.search input,
.mod-finder input,
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
select {
  border: 1px solid var(--hg-border);
  border-radius: 999px;
  background: rgba(7, 14, 26, 0.68);
  color: var(--hg-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0 4rem;
}

.section,
.hero,
.main-content,
.sidebar-left,
.sidebar-right,
.footer-inner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  background:
    linear-gradient(180deg, rgba(38, 97, 176, 0.24), rgba(8, 23, 45, 0) 28%),
    linear-gradient(145deg, rgba(11, 36, 74, 0.9), rgba(8, 25, 50, 0.84));
  box-shadow: var(--hg-shadow);
  backdrop-filter: blur(22px);
}

.section::before,
.hero::before,
.main-content::before,
.sidebar-left::before,
.sidebar-right::before,
.footer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%),
    radial-gradient(circle at top right, rgba(114, 226, 255, 0.12), transparent 24%);
  pointer-events: none;
}

.section,
.main-content,
.sidebar-left,
.sidebar-right,
.footer-inner {
  padding: clamp(1.4rem, 2vw, 2rem);
}

.hero {
  padding: clamp(2rem, 5vw, 4rem);
}

.hero.parallax {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  background:
    radial-gradient(circle at 18% 22%, rgba(114, 226, 255, 0.34), transparent 26%),
    radial-gradient(circle at 76% 78%, rgba(123, 140, 255, 0.24), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 179, 71, 0.1), transparent 16%),
    linear-gradient(135deg, rgba(7, 20, 40, 0.96) 0%, rgba(14, 45, 89, 0.94) 46%, rgba(12, 39, 78, 0.98) 100%);
}

.hero.parallax::after {
  content: "";
  position: absolute;
  inset: auto -8% -35% auto;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 226, 255, 0.3), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
}

.hero.parallax::before {
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 35%),
    url('../img/featured/600/ready-to-go.png');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.hero.parallax > * {
  position: relative;
  z-index: 2;
}

.hero h1,
.hero .display-1,
.hero .display-2 {
  max-width: 12ch;
  font-size: clamp(2.75rem, 7vw, 5.4rem);
}

.hero p {
  max-width: 60ch;
  margin: 1rem 0 0;
  font-size: 1.08rem;
  line-height: 1.8;
}

.btn-download,
.mod-hegemon-section__button,
button,
.btn,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hg-cta) 0%, #ff8d2f 58%, var(--hg-cta-hover) 100%);
  color: #08111f;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 18px 34px rgba(255, 122, 26, 0.34), 0 0 26px rgba(255, 179, 71, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.btn-download:hover,
.btn-download:focus-visible,
.mod-hegemon-section__button:hover,
.mod-hegemon-section__button:focus-visible,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: #08111f;
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 22px 40px rgba(255, 122, 26, 0.4), 0 0 32px rgba(255, 179, 71, 0.22);
}

.features-grid,
.bottom-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.features,
.bottom-a,
.bottom-b {
  min-width: 0;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 240px);
  gap: 2rem;
  align-items: start;
}

.main-content {
  min-width: 0;
}

.content-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.main-content .component {
  position: relative;
  margin-top: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hg-border);
}

.main-content .component > *:first-child {
  margin-top: 0;
}

.is-home .main-content .component .page-header,
.is-home .main-content .component .page-title,
.is-home .main-content .component .item-title,
.is-home .main-content .component > h1:first-child {
  display: none;
}

.sidebar-left,
.sidebar-right {
  background:
    radial-gradient(circle at top left, rgba(114, 226, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(15, 49, 97, 0.48), rgba(8, 21, 40, 0.92));
}

.sidebar-panel,
.content-panel {
  min-height: 100%;
}

.footer {
  width: min(calc(100% - 2rem), var(--hg-content-width));
  margin: 0 auto 2rem;
}

.footer-inner {
  background:
    radial-gradient(circle at top center, rgba(114, 226, 255, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(18, 52, 102, 0.96), rgba(8, 19, 39, 0.98));
}

.hero-logo {
  width: 120px;
  margin-bottom: 1.5rem;
  border-radius: 1.25rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.mod-hegemon-section {
  position: relative;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.mod-hegemon-section.variant-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  min-height: clamp(420px, 72vh, 760px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mod-hegemon-section__fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mod-hegemon-section__fx-orb,
.mod-hegemon-section__fx-grid {
  position: absolute;
}

.mod-hegemon-section__fx-orb {
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.75;
}

.mod-hegemon-section__fx-orb--one {
  top: 6%;
  right: 18%;
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle, rgba(114, 226, 255, 0.28), transparent 70%);
  animation: hgFloat 8s ease-in-out infinite;
}

.mod-hegemon-section__fx-orb--two {
  bottom: 4%;
  left: -4%;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(123, 140, 255, 0.22), transparent 72%);
  animation: hgFloat 11s ease-in-out infinite reverse;
}

.mod-hegemon-section__fx-grid {
  inset: 10% 4% 8% auto;
  width: min(34vw, 26rem);
  border: 1px solid rgba(114, 226, 255, 0.08);
  border-radius: 32px;
  background-image:
    linear-gradient(rgba(114, 226, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 226, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 88%);
  opacity: 0.42;
  animation: hgGridShift 18s linear infinite;
}

.mod-hegemon-section.variant-compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.mod-hegemon-section.variant-compact::before {
  display: none;
}

.mod-hegemon-section.align-center {
  flex-direction: column;
  text-align: center;
}

.mod-hegemon-section.has-background {
  background-image: linear-gradient(135deg, rgba(8, 23, 45, 0.74), rgba(26, 82, 150, 0.72)), var(--hegemon-section-background);
  background-size: cover;
  background-position: center;
}

.mod-hegemon-section__content {
  position: relative;
  z-index: 2;
  flex: 1 1 420px;
}

.mod-hegemon-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--hg-accent);
  border: 1px solid rgba(114, 226, 255, 0.2);
  border-radius: 999px;
  background: rgba(6, 20, 40, 0.38);
  box-shadow: inset 0 0 0 1px rgba(114, 226, 255, 0.04);
}

.mod-hegemon-section__eyebrow-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hg-accent), #ffffff);
  box-shadow: 0 0 16px rgba(114, 226, 255, 0.8);
}

.mod-hegemon-section__title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 3.2rem);
  text-wrap: balance;
}

.variant-hero .mod-hegemon-section__title {
  max-width: 11ch;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-shadow: 0 0 32px rgba(114, 226, 255, 0.08);
}

.mod-hegemon-section__text {
  margin-bottom: 1.5rem;
  color: var(--hg-text-muted);
  line-height: 1.75;
}

.variant-hero .mod-hegemon-section__text {
  max-width: 58ch;
  font-size: 1.08rem;
}

.variant-hero .mod-hegemon-section__content > * {
  animation: hgContentRise 700ms ease both;
}

.variant-hero .mod-hegemon-section__content > *:nth-child(2) {
  animation-delay: 90ms;
}

.variant-hero .mod-hegemon-section__content > *:nth-child(3) {
  animation-delay: 180ms;
}

.variant-hero .mod-hegemon-section__content > *:nth-child(4) {
  animation-delay: 270ms;
}

.mod-hegemon-section__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.mod-hegemon-section__link {
  color: var(--hg-accent);
  font-weight: 600;
  text-decoration: none;
}

.features.section,
.bottom-a.section,
.bottom-b.section {
  background:
    radial-gradient(circle at top left, rgba(114, 226, 255, 0.16), transparent 26%),
    radial-gradient(circle at bottom right, rgba(123, 140, 255, 0.12), transparent 22%),
    linear-gradient(145deg, rgba(12, 38, 78, 0.92), rgba(7, 20, 39, 0.86));
}

.main-content.section {
  background:
    radial-gradient(circle at top right, rgba(114, 226, 255, 0.12), transparent 22%),
    radial-gradient(circle at bottom left, rgba(123, 140, 255, 0.08), transparent 26%),
    linear-gradient(145deg, rgba(12, 39, 76, 0.94), rgba(8, 21, 41, 0.9));
}

.features.section:hover,
.bottom-a.section:hover,
.bottom-b.section:hover,
.sidebar-left:hover,
.sidebar-right:hover {
  border-color: var(--hg-border-strong);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32), 0 0 26px rgba(33, 196, 255, 0.12);
}

.mod-hegemon-section__media {
  position: relative;
  z-index: 2;
  flex: 0 1 420px;
}

.variant-hero .mod-hegemon-section__media {
  flex: 0 1 min(44vw, 560px);
  width: 100%;
}

.mod-hegemon-section__media-shell {
  position: relative;
  isolation: isolate;
  padding: clamp(0.75rem, 1.8vw, 1rem);
  border: 1px solid rgba(114, 226, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(10, 31, 60, 0.78), rgba(4, 14, 29, 0.88));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.mod-hegemon-section__media-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 14%),
    linear-gradient(90deg, transparent, rgba(114, 226, 255, 0.05), transparent);
  pointer-events: none;
}

.mod-hegemon-section__media-glow {
  position: absolute;
  inset: auto -6% -10% auto;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 226, 255, 0.26), transparent 68%);
  filter: blur(14px);
  animation: hgPulse 5s ease-in-out infinite;
}

.mod-hegemon-section__media-frame {
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(114, 226, 255, 0.14);
  border-radius: 22px;
  pointer-events: none;
}

.mod-hegemon-section__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: var(--hg-radius-md);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
  transform: perspective(1400px) rotateY(-10deg) rotateX(4deg) translateY(0);
  transform-origin: center left;
  animation: hgHoverMedia 8s ease-in-out infinite;
}

.mod-hegemon-section__media-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  min-height: 360px;
  padding: 1.25rem;
  border-radius: var(--hg-radius-md);
  background:
    radial-gradient(circle at top right, rgba(114, 226, 255, 0.18), transparent 26%),
    linear-gradient(145deg, rgba(18, 53, 102, 0.92), rgba(6, 18, 36, 0.92));
}

.mod-hegemon-section__placeholder-bar {
  display: block;
  height: 0.8rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(114, 226, 255, 0.34), rgba(255, 255, 255, 0.08));
  background-size: 200% 100%;
  animation: hgShimmer 3.8s linear infinite;
}

.mod-hegemon-section__placeholder-bar--short {
  width: 34%;
}

.mod-hegemon-section__placeholder-bar--mid {
  width: 58%;
}

.mod-hegemon-section__placeholder-bar--wide {
  width: 72%;
}

.mod-hegemon-section__placeholder-panel {
  display: block;
  min-height: 220px;
  border: 1px solid rgba(114, 226, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(rgba(114, 226, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 226, 255, 0.08) 1px, transparent 1px),
    linear-gradient(145deg, rgba(7, 22, 43, 0.94), rgba(12, 35, 67, 0.94));
  background-size: 24px 24px, 24px 24px, auto;
}

.breadcrumbs,
.mod-breadcrumbs {
  margin-bottom: 1rem;
}

.mod-breadcrumbs,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.breadcrumb-item,
.breadcrumb li {
  color: var(--hg-text-muted);
}

@media (max-width: 1100px) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-left,
  .sidebar-right {
    order: 2;
  }
}

@media (max-width: 900px) {
  .header-inner {
    border-radius: 32px;
  }

  .brand-nav,
  .nav,
  .features-grid,
  .bottom-layout {
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
  }

  .mod-hegemon-section:not(.variant-hero) {
    flex-direction: column;
  }

  .brand-nav {
    align-items: stretch;
  }

  .brand-link {
    justify-content: center;
  }

  .nav {
    align-items: stretch;
  }

  .mod-hegemon-section,
  .hero.parallax {
    text-align: center;
  }

  .variant-hero .mod-hegemon-section__title {
    max-width: none;
  }

  .mod-hegemon-section__fx-grid {
    inset: auto 8% 4% 8%;
    width: auto;
    height: 32%;
  }

  .mod-hegemon-section__media img {
    transform: none;
    animation: none;
  }

  .mod-hegemon-section__actions {
    justify-content: center;
  }
}

@media (max-width: 780px) {
  .mod-hegemon-section.variant-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .section,
  .hero,
  .main-content,
  .sidebar-left,
  .sidebar-right {
    animation: hg-rise 600ms ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site.modern-template,
  body.site.modern-template::before,
  body.site.modern-template::after {
    animation: none !important;
  }

  .site-shell::before,
  .site-shell::after {
    animation: none !important;
  }

  .mod-hegemon-section__fx-orb,
  .mod-hegemon-section__fx-grid,
  .mod-hegemon-section__media-glow,
  .mod-hegemon-section__media img,
  .mod-hegemon-section__placeholder-bar {
    animation: none !important;
  }
}

@keyframes hg-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hgAmbientShift {
  0% {
    background-position: 10% 16%, 84% 68%, 88% 16%, 50% 110%, 0 0;
  }

  50% {
    background-position: 14% 12%, 78% 72%, 84% 20%, 46% 104%, 0 0;
  }

  100% {
    background-position: 18% 18%, 72% 64%, 80% 14%, 42% 98%, 0 0;
  }
}

@keyframes hgGridDrift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 64px, 64px 0;
  }
}

@keyframes hgGlowDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }

  100% {
    transform: translate3d(0, -14px, 0) scale(1.05);
    opacity: 1;
  }
}

@keyframes hgFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -16px, 0) scale(1.04);
  }
}

@keyframes hgGridShift {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(22px);
  }
}

@keyframes hgPulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes hgHoverMedia {
  0%,
  100% {
    transform: perspective(1400px) rotateY(-10deg) rotateX(4deg) translateY(0);
  }

  50% {
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) translateY(-10px);
  }
}

@keyframes hgContentRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hgShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}

@keyframes hgOrbDriftLeft {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.58;
  }

  50% {
    transform: translate3d(3vw, 5vh, 0) scale(1.08);
    opacity: 0.82;
  }

  100% {
    transform: translate3d(8vw, -2vh, 0) scale(0.95);
    opacity: 0.66;
  }
}

@keyframes hgOrbDriftRight {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.54;
  }

  50% {
    transform: translate3d(-4vw, -4vh, 0) scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: translate3d(-9vw, 2vh, 0) scale(0.96);
    opacity: 0.62;
  }
}

/* Green palette override */
:root {
  --hg-bg-canvas-mid: #0b2a1d;
  --hg-bg-canvas-deep: #1b5b3e;
  --hg-surface: rgba(7, 41, 30, 0.8);
  --hg-surface-strong: rgba(12, 56, 38, 0.94);
  --hg-surface-soft: rgba(7, 34, 24, 0.86);
  --hg-border: rgba(105, 255, 187, 0.26);
  --hg-border-strong: rgba(97, 255, 179, 0.56);
  --hg-accent: #78ffbf;
  --hg-accent-strong: #27e288;
  --hg-accent-secondary: #b8ff75;
  --hg-grid-line: rgba(105, 255, 187, 0.1);
}

body.site.modern-template {
  background:
    radial-gradient(circle at 10% 16%, rgba(97, 255, 179, 0.34), transparent 26%),
    radial-gradient(circle at 84% 68%, rgba(58, 209, 123, 0.3), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(196, 255, 120, 0.14), transparent 16%),
    radial-gradient(circle at 50% 110%, rgba(39, 226, 136, 0.12), transparent 28%),
    linear-gradient(135deg, var(--hg-bg-canvas) 0%, var(--hg-bg-canvas-mid) 45%, var(--hg-bg-canvas-deep) 100%);
}

body.site.modern-template::after {
  background:
    radial-gradient(circle at 18% 20%, rgba(97, 255, 179, 0.12), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(184, 255, 117, 0.1), transparent 36%),
    radial-gradient(circle at center, transparent 38%, rgba(3, 12, 8, 0.24) 100%),
    linear-gradient(180deg, rgba(8, 22, 14, 0.1), rgba(8, 22, 14, 0.28));
}

.site-shell::before {
  background: radial-gradient(circle, rgba(97, 255, 179, 0.34), rgba(97, 255, 179, 0));
}

.site-shell::after {
  background: radial-gradient(circle, rgba(184, 255, 117, 0.28), rgba(184, 255, 117, 0));
}

.header-inner {
  background: linear-gradient(180deg, rgba(8, 35, 24, 0.86), rgba(11, 48, 33, 0.78));
}

.layout-shell::before,
.hero-shell::before,
.footer-shell::before {
  background: linear-gradient(90deg, transparent, rgba(97, 255, 179, 0.34), rgba(184, 255, 117, 0.24), transparent);
}

.hero.parallax {
  background:
    radial-gradient(circle at 18% 22%, rgba(97, 255, 179, 0.3), transparent 26%),
    radial-gradient(circle at 76% 78%, rgba(184, 255, 117, 0.2), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 179, 71, 0.08), transparent 16%),
    linear-gradient(135deg, rgba(7, 22, 16, 0.96) 0%, rgba(13, 50, 34, 0.94) 46%, rgba(11, 39, 28, 0.98) 100%);
}

.features.section,
.bottom-a.section,
.bottom-b.section,
.main-content.section,
.sidebar-left,
.sidebar-right,
.footer-inner {
  border-color: rgba(105, 255, 187, 0.26);
}

.brand-link__text,
.mod-hegemon-section__title,
.hero h1,
.hero .display-1,
.hero .display-2 {
  text-shadow: 0 0 28px rgba(97, 255, 179, 0.1);
}
