:root {
  --bg: #050809;
  --graphite: #101719;
  --graphite-2: #182326;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --text: #f4f8f8;
  --muted: rgba(244, 248, 248, 0.72);
  --soft: rgba(244, 248, 248, 0.54);
  --cyan: #48c7c2;
  --cyan-soft: rgba(72, 199, 194, 0.22);
  --magenta: #ee2a8a;
  --magenta-soft: rgba(238, 42, 138, 0.2);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shadow: 0 24px 80px rgba(0,0,0,0.42);
  --max: 980px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(72, 199, 194, 0.18), transparent 28rem),
    radial-gradient(circle at 100% 10%, rgba(238, 42, 138, 0.12), transparent 22rem),
    linear-gradient(180deg, #040607 0%, #071011 42%, #030505 100%);
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  background: var(--text);
  color: #020303;
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 1000;
}
.skip-link:focus { top: 16px; }

.site-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 32px);
  background: linear-gradient(180deg, rgba(5,8,9,0.9), rgba(5,8,9,0.58) 72%, transparent);
  backdrop-filter: blur(18px);
}
.brand-mini { width: 120px; opacity: 0.95; }
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.top-actions a {
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
}
.top-actions a:hover { border-color: var(--line); color: var(--text); }
.top-pill {
  border-color: rgba(72, 199, 194, 0.38) !important;
  background: rgba(72, 199, 194, 0.1);
}

.section-panel { min-height: 100svh; }
.section-pad {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 76px 0;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 16px;
}
.section-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--magenta);
  border-radius: 999px;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-size: clamp(42px, 12vw, 86px);
  line-height: 0.92;
  letter-spacing: -0.07em;
  margin-bottom: 22px;
}
h2 {
  font-size: clamp(32px, 8vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin-bottom: 18px;
}
h3 {
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
p { color: var(--muted); line-height: 1.58; }
.lead { font-size: 17px; max-width: 760px; }

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 92px 16px 32px;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.34), rgba(3,6,7,0.72) 54%, #050809 100%),
    url('/profile/assets/img/hero-davos-ce.webp') center/cover no-repeat;
  z-index: -3;
  transform: scale(1.03);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0, rgba(72,199,194,0.08) 48%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.032) 0, rgba(255,255,255,0.032) 1px, transparent 1px, transparent 72px);
  mask-image: linear-gradient(180deg, transparent, black 26%, black 82%, transparent);
  z-index: -2;
}
.stage-light {
  position: absolute;
  width: 46vw;
  height: 90vh;
  top: 0;
  background: linear-gradient(180deg, rgba(72,199,194,0.26), transparent 74%);
  filter: blur(28px);
  opacity: 0.5;
  transform-origin: top center;
  z-index: -1;
  animation: sweep 11s ease-in-out infinite alternate;
}
.light-a { left: 3%; transform: rotate(22deg); }
.light-b { right: 3%; transform: rotate(-18deg); animation-delay: -3s; }
@keyframes sweep {
  from { opacity: 0.23; transform: rotate(16deg) translateY(-4%); }
  to { opacity: 0.56; transform: rotate(-9deg) translateY(2%); }
}
.hero-content {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 42px 18px 22px;
  background: linear-gradient(180deg, rgba(5,8,9,0.02), rgba(5,8,9,0.64));
  border-radius: var(--radius-lg);
}
.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 18px;
}
.hero-logo {
  width: min(420px, 86vw);
  margin-bottom: 26px;
  filter: drop-shadow(0 16px 42px rgba(0,0,0,0.48));
}
.hero-copy {
  max-width: 640px;
  font-size: 18px;
  color: rgba(244,248,248,0.82);
}
.hero-cta, .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.button-primary {
  border-color: rgba(72,199,194,0.5);
  background: linear-gradient(135deg, var(--cyan), #1d8f91);
  color: #001314;
  box-shadow: 0 16px 46px rgba(72,199,194,0.24);
}
.button-ghost { background: rgba(255,255,255,0.06); }
.hero-status {
  width: min(var(--max), 100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero-status span {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(5,8,9,0.52);
  padding: 9px 10px;
  text-align: center;
  color: var(--soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.triad-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.value-card, .rail-card, .stat-card, .eco-tile, .brand-card, .contact-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)),
    rgba(10,16,17,0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.value-card {
  min-height: 220px;
  padding: 22px;
  border-radius: var(--radius-md);
}
.card-num {
  color: var(--magenta);
  font-weight: 900;
  letter-spacing: 0.14em;
  font-size: 12px;
}
.section-rail {
  position: relative;
}
.section-rail::before {
  content: "";
  position: absolute;
  left: max(16px, calc((100vw - var(--max)) / 2));
  right: max(16px, calc((100vw - var(--max)) / 2));
  top: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  opacity: 0.5;
}
.why-stack {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}
.rail-card {
  padding: 22px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.rail-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--magenta));
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.eco-tile {
  min-height: 170px;
  padding: 18px;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.eco-tile:hover, .eco-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(72,199,194,0.5);
  outline: none;
}
.eco-tile span {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #001314;
  background: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 18px;
}
.eco-tile strong { display: block; font-size: 17px; margin-bottom: 8px; }
.eco-tile small { display: block; color: var(--muted); line-height: 1.35; }
.eco-feature {
  border-color: rgba(238,42,138,0.45);
  background:
    radial-gradient(circle at 20% 0%, rgba(238,42,138,0.26), transparent 18rem),
    linear-gradient(145deg, rgba(72,199,194,0.12), rgba(255,255,255,0.025));
}

.stats-grid { margin-top: 0; }
.stat-card {
  padding: 26px 18px;
  border-radius: var(--radius-md);
  text-align: center;
}
.stat-card strong {
  display: block;
  font-size: clamp(44px, 13vw, 86px);
  line-height: 0.88;
  letter-spacing: -0.08em;
}
.stat-card span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.gallery-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 116px;
  gap: 8px;
  margin-top: 32px;
}
.gallery-tile, .gallery-slot {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  min-width: 0;
}
.gallery-tile {
  position: relative;
  padding: 0;
  cursor: zoom-in;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(5,8,9,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  font-weight: 800;
}
.gallery-tile-feature {
  grid-column: span 3;
  grid-row: span 2;
}
.gallery-slot {
  display: grid;
  place-items: center;
  min-height: 0;
  color: var(--soft);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(72,199,194,0.09), transparent),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px),
    rgba(255,255,255,0.035);
}

.brand-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}
.brand-card {
  min-height: 112px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: 22px;
}
.brand-card img {
  max-width: 84%;
  max-height: 54px;
  object-fit: contain;
  filter: grayscale(0.05) brightness(1.05);
}
.brand-placeholder span {
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact { padding-bottom: 42px; }
.contact-card {
  border-radius: 34px;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,199,194,0.18), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)),
    rgba(8,13,14,0.92);
}
.contact-logo { width: min(440px, 90%); margin: 0 auto 26px; }
.contact-actions { justify-content: center; }
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 34px auto 12px;
  opacity: 0.82;
}
.partner-logos img:first-child { width: 170px; }
.partner-logos img:last-child { width: 58px; }
.fineprint { color: var(--soft); font-size: 13px; margin-bottom: 0; }

.modal, .lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(18px);
}
.modal[aria-hidden="false"], .lightbox[aria-hidden="false"] { display: flex; }
.modal-panel, .lightbox-panel {
  width: min(680px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(20,30,32,0.98), rgba(5,8,9,0.98));
  box-shadow: var(--shadow);
  padding: 28px;
  position: relative;
}
.modal-close, .lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.lightbox-panel {
  width: min(980px, 100%);
  padding: 12px;
}
.lightbox-panel img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 20px;
  background: #020303;
}
.lightbox-copy { padding: 16px 8px 6px; }
.lightbox-copy h2 { font-size: 28px; margin-bottom: 6px; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .site-top { padding: 12px 14px; }
  .brand-mini { width: 96px; }
  .top-actions a:not(.top-pill) { display: none; }
  .section-pad { padding: 62px 0; width: min(100% - 26px, var(--max)); }
  .hero { min-height: 100svh; padding: 78px 13px 24px; }
  .hero-content { padding: 32px 10px 10px; }
  .hero-logo { width: min(360px, 92vw); }
  .hero-cta .button, .contact-actions .button { width: 100%; }
  .triad-grid, .stats-grid, .brand-wall { grid-template-columns: 1fr; }
  .ecosystem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .eco-tile { min-height: 156px; padding: 15px; }
  .gallery-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 7px; }
  .gallery-tile-feature { grid-column: span 3; grid-row: span 2; }
  .brand-card { min-height: 100px; }
  .partner-logos { gap: 18px; }
  .partner-logos img:first-child { width: 146px; }
  .modal-panel { padding: 24px 20px; }
}

@media (max-width: 420px) {
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .lead, .hero-copy { font-size: 16px; }
  .ecosystem-grid { grid-template-columns: 1fr; }
  .hero-status { grid-template-columns: 1fr; }
  .gallery-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 108px; }
  .gallery-tile-feature { grid-column: span 2; grid-row: span 2; }
}

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

/* REV JAMi-PROFILE-1.1 - ecosystem interaction polish */
.ecosystem {
  position: relative;
  isolation: isolate;
}
.ecosystem::before {
  content: "";
  position: absolute;
  inset: 28px max(10px, calc((100vw - var(--max)) / 2)) auto;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(72,199,194,0.16), transparent 15rem),
    radial-gradient(circle at 88% 16%, rgba(238,42,138,0.12), transparent 17rem),
    linear-gradient(90deg, transparent 0, rgba(255,255,255,0.035) 50%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, transparent 78%);
  z-index: -1;
}
.ecosystem-console {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 26px 0 4px;
  padding: 15px 16px;
  border: 1px solid rgba(72,199,194,0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(72,199,194,0.12), rgba(238,42,138,0.055)),
    rgba(5,8,9,0.66);
  box-shadow: 0 18px 70px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.035);
  overflow: hidden;
}
.ecosystem-console::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.12) 46%, transparent 58%);
  transform: translateX(-120%);
  animation: consoleSweep 4.6s ease-in-out infinite;
}
.console-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 8px rgba(72,199,194,0.11), 0 0 22px rgba(72,199,194,0.68);
}
.console-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(72,199,194,0.42);
  border-radius: 50%;
  animation: ping 1.9s ease-out infinite;
}
.ecosystem-console strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.ecosystem-console small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}
.ecosystem-grid {
  perspective: 1400px;
}
.eco-tile {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.026)),
    radial-gradient(circle at 16% 10%, rgba(72,199,194,0.08), transparent 9rem),
    rgba(10,16,17,0.82);
  transform-style: preserve-3d;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}
.eco-tile::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--orbit-angle, 0deg), transparent 0deg, rgba(72,199,194,0.04) 80deg, var(--cyan) 132deg, var(--magenta) 172deg, rgba(255,255,255,0.5) 205deg, transparent 270deg);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.eco-tile::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -58px;
  top: -58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,199,194,0.18), transparent 62%);
  opacity: 0.75;
  transition: transform 260ms ease, opacity 260ms ease;
}
.tile-orbit {
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--radius-md) - 6px);
  border: 1px solid rgba(72,199,194,0.08);
  pointer-events: none;
}
.tile-orbit::before,
.tile-orbit::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(72,199,194,0.55));
}
.tile-orbit::before {
  top: -1px;
  left: 12%;
  width: 32%;
  height: 2px;
}
.tile-orbit::after {
  bottom: -1px;
  right: 10%;
  width: 26%;
  height: 2px;
}
.eco-tile:hover,
.eco-tile:focus-visible,
.eco-tile.is-active {
  transform: translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.012);
  border-color: rgba(72,199,194,0.58);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.48),
    0 0 0 1px rgba(72,199,194,0.13),
    0 0 42px rgba(72,199,194,0.16);
  outline: none;
}
.eco-tile:hover::before,
.eco-tile:focus-visible::before,
.eco-tile.is-active::before {
  opacity: 1;
  animation: borderOrbit 1.25s linear infinite;
}
.eco-tile:hover .tile-orbit::before,
.eco-tile:hover .tile-orbit::after,
.eco-tile:focus-visible .tile-orbit::before,
.eco-tile:focus-visible .tile-orbit::after,
.eco-tile.is-active .tile-orbit::before,
.eco-tile.is-active .tile-orbit::after {
  opacity: 1;
  animation: orbitLine 1.1s ease-in-out infinite alternate;
}
.eco-tile.is-active {
  animation: tilePress 320ms ease both;
}
.eco-tile .eco-index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #001314;
  background: linear-gradient(135deg, #76fff5, var(--cyan));
  box-shadow: 0 0 0 5px rgba(72,199,194,0.08), 0 10px 26px rgba(72,199,194,0.18);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 18px;
}
.eco-tile strong,
.eco-tile small,
.eco-tile em {
  position: relative;
  z-index: 1;
}
.eco-tile strong {
  font-size: 18px;
}
.eco-tile small {
  min-height: 38px;
}
.eco-tile em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: rgba(244,248,248,0.72);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.eco-tile em::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 16px rgba(238,42,138,0.8);
  animation: tapHint 1.7s ease-in-out infinite;
}
.eco-feature {
  border-color: rgba(238,42,138,0.52);
  background:
    radial-gradient(circle at 22% 0%, rgba(238,42,138,0.24), transparent 12rem),
    radial-gradient(circle at 95% 18%, rgba(72,199,194,0.18), transparent 10rem),
    linear-gradient(145deg, rgba(72,199,194,0.14), rgba(255,255,255,0.028));
}
.eco-feature .eco-index {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: #050809;
}
.modal {
  opacity: 0;
  transition: opacity 220ms ease;
}
.modal[aria-hidden="false"] {
  opacity: 1;
}
.modal[aria-hidden="false"] .ecosystem-modal-panel {
  animation: moduleOpen 380ms cubic-bezier(.2,.82,.18,1) both;
}
.modal.is-closing {
  opacity: 0;
}
.modal.is-closing .ecosystem-modal-panel {
  animation: moduleClose 220ms ease both;
}
.ecosystem-modal-panel {
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at 20% 0%, rgba(72,199,194,0.22), transparent 15rem),
    radial-gradient(circle at 100% 24%, rgba(238,42,138,0.14), transparent 16rem),
    linear-gradient(145deg, rgba(20,30,32,0.98), rgba(5,8,9,0.99));
}
.ecosystem-modal-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;
  background: conic-gradient(from 0deg, rgba(72,199,194,0), var(--cyan), var(--magenta), rgba(255,255,255,0.72), rgba(72,199,194,0));
  opacity: 0.62;
  animation: borderOrbit 3s linear infinite;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ecosystem-modal-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  box-shadow: 0 0 22px rgba(72,199,194,0.58);
}
.modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.modal-kicker span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 18px rgba(238,42,138,0.9);
}
.ecosystem-modal-panel h2 {
  margin-bottom: 14px;
}
.ecosystem-modal-panel p {
  color: rgba(244,248,248,0.82);
  font-size: 17px;
}
.modal-points {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}
.modal-points li {
  position: relative;
  padding: 12px 14px 12px 38px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  color: rgba(244,248,248,0.82);
  line-height: 1.35;
}
.modal-points li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 14px rgba(72,199,194,0.5);
}
.modal-action-close {
  width: 100%;
  min-height: 46px;
  margin-top: 24px;
  border: 1px solid rgba(72,199,194,0.35);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(72,199,194,0.16), rgba(238,42,138,0.08));
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.modal-action-close:hover,
.modal-action-close:focus-visible {
  outline: none;
  border-color: rgba(72,199,194,0.7);
  box-shadow: 0 0 28px rgba(72,199,194,0.16);
}
@keyframes consoleSweep {
  0%, 58% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}
@keyframes ping {
  0% { transform: scale(0.62); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes borderOrbit {
  to { --orbit-angle: 360deg; transform: rotate(360deg); }
}
@keyframes orbitLine {
  from { transform: translateX(-8px); filter: drop-shadow(0 0 6px rgba(72,199,194,0.45)); }
  to { transform: translateX(8px); filter: drop-shadow(0 0 16px rgba(238,42,138,0.6)); }
}
@keyframes tapHint {
  0%, 100% { transform: scale(0.8); opacity: 0.55; }
  50% { transform: scale(1.24); opacity: 1; }
}
@keyframes tilePress {
  0% { transform: translateY(-2px) scale(1); }
  42% { transform: translateY(-2px) scale(0.978); }
  100% { transform: translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.012); }
}
@keyframes moduleOpen {
  from { opacity: 0; transform: translateY(26px) scale(0.94); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes moduleClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(0.96); }
}
@media (max-width: 860px) {
  .ecosystem-console {
    margin-top: 22px;
    padding: 14px;
    border-radius: 16px;
  }
  .eco-tile {
    min-height: 184px;
  }
  .eco-tile small {
    min-height: 42px;
  }
  .ecosystem-modal-panel {
    padding: 30px 20px 22px;
    border-radius: 26px;
  }
  .modal-points li {
    padding-right: 12px;
  }
}
@media (max-width: 420px) {
  .ecosystem-grid { grid-template-columns: 1fr; }
  .eco-tile { min-height: 174px; }
  .eco-tile em { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecosystem-console::after,
  .console-dot::after,
  .eco-tile::before,
  .tile-orbit::before,
  .tile-orbit::after,
  .eco-tile em::after,
  .ecosystem-modal-panel::before {
    animation: none !important;
  }
}

/* REV JAMi-PROFILE-1.2 - OS layer cue + cleaner edge-run modal */
@property --edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ecosystem .lead {
  margin-bottom: 22px;
}

.eco-guide:not(.is-active) {
  border-color: rgba(72,199,194,0.42);
  box-shadow:
    0 18px 62px rgba(0,0,0,0.34),
    0 0 0 1px rgba(72,199,194,0.09),
    0 0 28px rgba(72,199,194,0.12);
  animation: guideBreath 3.4s ease-in-out infinite;
}

.eco-guide:not(.is-active)::before {
  opacity: 0.82;
  background: conic-gradient(from var(--orbit-angle, 0deg), transparent 0deg 305deg, rgba(72,199,194,0.0) 308deg, rgba(72,199,194,0.95) 322deg, rgba(238,42,138,0.95) 338deg, rgba(255,255,255,0.86) 350deg, transparent 358deg);
  animation: borderOrbit 4.8s linear infinite;
}

.eco-guide:not(.is-active) .tile-orbit::before,
.eco-guide:not(.is-active) .tile-orbit::after {
  opacity: 0.78;
  animation: orbitLine 1.8s ease-in-out infinite alternate;
}

.eco-tile em {
  color: rgba(244,248,248,0.78);
}

.eco-tile em::after {
  animation: tapHint 2.1s ease-in-out infinite;
}

.ecosystem-modal-panel {
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 20% 0%, rgba(72,199,194,0.22), transparent 15rem) padding-box,
    radial-gradient(circle at 100% 24%, rgba(238,42,138,0.14), transparent 16rem) padding-box,
    linear-gradient(145deg, rgba(20,30,32,0.98), rgba(5,8,9,0.99)) padding-box,
    conic-gradient(from var(--edge-angle),
      rgba(72,199,194,0.08) 0deg,
      rgba(72,199,194,0.08) 255deg,
      rgba(72,199,194,0.0) 282deg,
      rgba(72,199,194,0.96) 306deg,
      rgba(238,42,138,0.96) 326deg,
      rgba(255,255,255,0.9) 342deg,
      rgba(72,199,194,0.0) 360deg) border-box;
  animation: edgeRun 7.2s linear infinite;
  overflow: hidden;
}

.ecosystem-modal-panel::before {
  content: none !important;
}

.ecosystem-modal-panel::after {
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, rgba(72,199,194,0.74), rgba(238,42,138,0.74), transparent);
}

.ecosystem-modal-panel h2 {
  margin-top: 2px;
}

.modal-action-close {
  margin-top: 26px;
}

@keyframes edgeRun {
  to { --edge-angle: 360deg; }
}

@keyframes guideBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 18px 62px rgba(0,0,0,0.34),
      0 0 0 1px rgba(72,199,194,0.09),
      0 0 24px rgba(72,199,194,0.10);
  }
  50% {
    transform: translateY(-3px) scale(1.006);
    box-shadow:
      0 24px 76px rgba(0,0,0,0.42),
      0 0 0 1px rgba(72,199,194,0.18),
      0 0 42px rgba(72,199,194,0.18),
      0 0 22px rgba(238,42,138,0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eco-guide:not(.is-active),
  .ecosystem-modal-panel {
    animation: none !important;
  }
}


/* REV JAMi-PROFILE-1.3 - ecosystem equal breathing tiles + clean edge run */
@property --tile-edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.eco-tile,
.eco-feature,
.eco-guide:not(.is-active) {
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 16% 10%, rgba(72,199,194,0.09), transparent 9rem) padding-box,
    radial-gradient(circle at 95% 18%, rgba(238,42,138,0.045), transparent 10rem) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.086), rgba(255,255,255,0.024)) padding-box,
    rgba(10,16,17,0.86) padding-box,
    conic-gradient(from var(--tile-edge-angle),
      rgba(72,199,194,0.12) 0deg,
      rgba(72,199,194,0.12) 250deg,
      rgba(72,199,194,0.0) 285deg,
      rgba(72,199,194,0.82) 308deg,
      rgba(238,42,138,0.66) 330deg,
      rgba(255,255,255,0.66) 348deg,
      rgba(72,199,194,0.12) 360deg) border-box;
  box-shadow:
    0 18px 62px rgba(0,0,0,0.34),
    0 0 0 1px rgba(72,199,194,0.08),
    0 0 24px rgba(72,199,194,0.095);
  animation: tileBreathSoft 5.8s ease-in-out infinite, tileEdgeRun 10.5s linear infinite;
}

.eco-tile:nth-child(2) { animation-delay: .35s, .35s; }
.eco-tile:nth-child(3) { animation-delay: .7s, .7s; }
.eco-tile:nth-child(4) { animation-delay: 1.05s, 1.05s; }
.eco-tile:nth-child(5) { animation-delay: 1.4s, 1.4s; }
.eco-tile:nth-child(6) { animation-delay: 1.75s, 1.75s; }
.eco-tile:nth-child(7) { animation-delay: 2.1s, 2.1s; }
.eco-tile:nth-child(8) { animation-delay: 2.45s, 2.45s; }

/* Kill the old rotating internal sweep/stick. The motion now lives on the outside edge only. */
.eco-tile::before,
.eco-guide:not(.is-active)::before {
  content: none !important;
  animation: none !important;
}

.tile-orbit,
.tile-orbit::before,
.tile-orbit::after,
.eco-guide:not(.is-active) .tile-orbit::before,
.eco-guide:not(.is-active) .tile-orbit::after,
.eco-tile:hover .tile-orbit::before,
.eco-tile:hover .tile-orbit::after,
.eco-tile:focus-visible .tile-orbit::before,
.eco-tile:focus-visible .tile-orbit::after,
.eco-tile.is-active .tile-orbit::before,
.eco-tile.is-active .tile-orbit::after {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

.eco-feature,
.eco-feature .eco-index {
  border-color: transparent;
}

.eco-feature .eco-index,
.eco-tile .eco-index {
  background: linear-gradient(135deg, #76fff5, var(--cyan));
  color: #001314;
}

.eco-tile:hover,
.eco-tile:focus-visible,
.eco-tile.is-active {
  transform: translateY(-5px) scale(1.01);
  border-color: transparent;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.48),
    0 0 0 1px rgba(72,199,194,0.17),
    0 0 42px rgba(72,199,194,0.20),
    0 0 28px rgba(238,42,138,0.07);
}

.eco-tile.is-active {
  animation: tilePressClean 300ms ease both, tileEdgeRun 8.5s linear infinite;
}

.ecosystem-modal-panel {
  padding-bottom: 32px;
  animation: modalEdgeRun 10.5s linear infinite;
  background:
    radial-gradient(circle at 20% 0%, rgba(72,199,194,0.20), transparent 15rem) padding-box,
    radial-gradient(circle at 100% 24%, rgba(238,42,138,0.12), transparent 16rem) padding-box,
    linear-gradient(145deg, rgba(20,30,32,0.98), rgba(5,8,9,0.99)) padding-box,
    conic-gradient(from var(--edge-angle),
      rgba(72,199,194,0.10) 0deg,
      rgba(72,199,194,0.10) 252deg,
      rgba(72,199,194,0.0) 282deg,
      rgba(72,199,194,0.84) 306deg,
      rgba(238,42,138,0.72) 328deg,
      rgba(255,255,255,0.72) 344deg,
      rgba(72,199,194,0.10) 360deg) border-box;
}

.modal-action-close {
  display: none !important;
}

.modal-points {
  margin-bottom: 0;
}

@keyframes tileEdgeRun {
  to { --tile-edge-angle: 360deg; }
}

@keyframes tileBreathSoft {
  0%, 100% {
    box-shadow:
      0 18px 62px rgba(0,0,0,0.34),
      0 0 0 1px rgba(72,199,194,0.08),
      0 0 22px rgba(72,199,194,0.09);
  }
  50% {
    box-shadow:
      0 22px 74px rgba(0,0,0,0.42),
      0 0 0 1px rgba(72,199,194,0.16),
      0 0 42px rgba(72,199,194,0.18),
      0 0 18px rgba(238,42,138,0.06);
  }
}

@keyframes tilePressClean {
  0% { transform: translateY(-2px) scale(1); }
  45% { transform: translateY(-2px) scale(0.982); }
  100% { transform: translateY(-5px) scale(1.01); }
}

@keyframes modalEdgeRun {
  to { --edge-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-tile,
  .eco-feature,
  .eco-guide:not(.is-active),
  .ecosystem-modal-panel {
    animation: none !important;
  }
}


/* REV JAMi-PROFILE-1.4 - hero CTA cleanup + cleaner ecosystem touch cues */
/* Hero is now a clean first impression: logo, thesis line and copy only. */
.hero-cta,
.hero-status {
  display: none !important;
}

/* The cards themselves must invite interaction. No instructional label required. */
.eco-tile em,
.eco-tile em::after,
.tile-orbit,
.tile-orbit::before,
.tile-orbit::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
}

.eco-tile,
.eco-feature,
.eco-guide:not(.is-active) {
  min-height: 154px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 14% 18%, rgba(72,199,194,0.12), transparent 8rem) padding-box,
    radial-gradient(circle at 100% 20%, rgba(238,42,138,0.05), transparent 10rem) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.082), rgba(255,255,255,0.022)) padding-box,
    rgba(7,14,15,0.9) padding-box,
    conic-gradient(from var(--tile-edge-angle),
      rgba(72,199,194,0.10) 0deg,
      rgba(72,199,194,0.10) 250deg,
      rgba(72,199,194,0.00) 282deg,
      rgba(72,199,194,0.78) 306deg,
      rgba(238,42,138,0.58) 327deg,
      rgba(255,255,255,0.58) 344deg,
      rgba(72,199,194,0.10) 360deg) border-box;
  animation: tileBreathInvite 6.8s ease-in-out infinite, tileEdgeRunInvite 13.5s linear infinite;
}

.eco-tile:nth-child(2) { animation-delay: .45s, .45s; }
.eco-tile:nth-child(3) { animation-delay: .9s, .9s; }
.eco-tile:nth-child(4) { animation-delay: 1.35s, 1.35s; }
.eco-tile:nth-child(5) { animation-delay: 1.8s, 1.8s; }
.eco-tile:nth-child(6) { animation-delay: 2.25s, 2.25s; }
.eco-tile:nth-child(7) { animation-delay: 2.7s, 2.7s; }
.eco-tile:nth-child(8) { animation-delay: 3.15s, 3.15s; }

.eco-tile .eco-index {
  margin-bottom: 22px;
  box-shadow:
    0 0 0 6px rgba(72,199,194,0.09),
    0 0 24px rgba(72,199,194,0.34),
    0 14px 26px rgba(0,0,0,0.28);
  animation: indexPulseSoft 4.8s ease-in-out infinite;
}

.eco-tile strong {
  font-size: clamp(21px, 4.8vw, 27px);
  line-height: 1.05;
  margin-bottom: 10px;
}

.eco-tile small {
  min-height: auto !important;
  font-size: 15px;
  color: rgba(244,248,248,0.70);
}

.eco-tile::after {
  width: 160px;
  height: 160px;
  right: -86px;
  top: -86px;
  opacity: 0.45;
  background: radial-gradient(circle, rgba(72,199,194,0.18), transparent 65%);
}

.eco-tile:hover,
.eco-tile:focus-visible,
.eco-tile.is-active {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 26px 82px rgba(0,0,0,0.50),
    0 0 0 1px rgba(72,199,194,0.18),
    0 0 48px rgba(72,199,194,0.21),
    0 0 26px rgba(238,42,138,0.08);
}

/* Expanded layer: one top-right close control only, with a subtle colour run around the outside edge. */
.ecosystem-modal-panel {
  padding-bottom: 30px;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 18% 0%, rgba(72,199,194,0.18), transparent 15rem) padding-box,
    radial-gradient(circle at 100% 22%, rgba(238,42,138,0.12), transparent 16rem) padding-box,
    linear-gradient(145deg, rgba(20,30,32,0.985), rgba(5,8,9,0.995)) padding-box,
    conic-gradient(from var(--edge-angle),
      rgba(72,199,194,0.09) 0deg,
      rgba(72,199,194,0.09) 258deg,
      rgba(72,199,194,0.00) 286deg,
      rgba(72,199,194,0.82) 310deg,
      rgba(238,42,138,0.62) 330deg,
      rgba(255,255,255,0.68) 346deg,
      rgba(72,199,194,0.09) 360deg) border-box;
  animation: modalEdgeRunSlow 13.5s linear infinite;
}

.ecosystem-modal-panel::before {
  content: none !important;
}

.ecosystem-modal-panel::after {
  opacity: 0.55;
  background: linear-gradient(90deg, transparent, rgba(72,199,194,0.45), rgba(238,42,138,0.34), transparent);
}

.modal-action-close {
  display: none !important;
}

@keyframes tileEdgeRunInvite {
  to { --tile-edge-angle: 360deg; }
}

@keyframes tileBreathInvite {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 18px 62px rgba(0,0,0,0.34),
      0 0 0 1px rgba(72,199,194,0.08),
      0 0 22px rgba(72,199,194,0.09);
  }
  50% {
    transform: translateY(-2px) scale(1.004);
    box-shadow:
      0 23px 76px rgba(0,0,0,0.44),
      0 0 0 1px rgba(72,199,194,0.16),
      0 0 42px rgba(72,199,194,0.18),
      0 0 18px rgba(238,42,138,0.055);
  }
}

@keyframes indexPulseSoft {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(72,199,194,0.09),
      0 0 20px rgba(72,199,194,0.28),
      0 14px 26px rgba(0,0,0,0.28);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(72,199,194,0.13),
      0 0 32px rgba(72,199,194,0.44),
      0 0 18px rgba(238,42,138,0.10),
      0 14px 26px rgba(0,0,0,0.28);
  }
}

@keyframes modalEdgeRunSlow {
  to { --edge-angle: 360deg; }
}

@media (max-width: 420px) {
  .eco-tile,
  .eco-feature,
  .eco-guide:not(.is-active) {
    min-height: 150px;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eco-tile,
  .eco-feature,
  .eco-guide:not(.is-active),
  .eco-tile .eco-index,
  .ecosystem-modal-panel {
    animation: none !important;
  }
}

/* REV JAMi-PROFILE-1.5 - opening layout + sticky profile menu + interactive solve stack */
@property --solve-edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

body.menu-open {
  overflow: hidden;
}

.site-top-profile {
  min-height: 76px;
  padding: 0 clamp(20px, 5vw, 42px);
  background:
    linear-gradient(180deg, rgba(4,7,8,0.98), rgba(5,10,11,0.92));
  border-bottom: 1px solid rgba(72,199,194,0.10);
  box-shadow: 0 16px 42px rgba(0,0,0,0.34);
}

.top-title {
  color: var(--cyan);
  font-size: clamp(12px, 3.1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-toggle {
  position: relative;
  width: 54px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
  position: absolute;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #d8fff2;
  box-shadow: 0 0 16px rgba(72,199,194,0.36);
  transition: transform 240ms ease, opacity 180ms ease, top 240ms ease;
}

.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 31px; }

.site-top-profile.menu-open .menu-toggle span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}
.site-top-profile.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
  transform: translateX(10px);
}
.site-top-profile.menu-open .menu-toggle span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: clamp(14px, 4vw, 30px);
  width: min(320px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(72,199,194,0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(238,42,138,0.14), transparent 12rem),
    radial-gradient(circle at 0% 20%, rgba(72,199,194,0.18), transparent 12rem),
    rgba(7,12,13,0.96);
  box-shadow: 0 28px 90px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 210ms ease, transform 210ms ease;
}

.site-top-profile.menu-open .profile-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.profile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  color: rgba(244,248,248,0.82);
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.profile-menu a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  opacity: 0.62;
  box-shadow: 0 0 16px rgba(72,199,194,0.34);
}

.profile-menu a:hover,
.profile-menu a:focus-visible {
  outline: none;
  color: var(--text);
  border-color: rgba(72,199,194,0.22);
  background: rgba(255,255,255,0.055);
}

/* Opening hero now follows the provided layout: fixed title bar, hero logo scrolls with page, no repeated contact CTA. */
.hero {
  min-height: 100svh;
  padding: 92px 20px 38px;
  align-items: end;
}

.hero-bg {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(3,6,7,0.46) 38%, rgba(3,6,7,0.86) 70%, #050809 100%),
    url('/profile/assets/img/hero-davos-ce.webp') center top/cover no-repeat;
  transform: scale(1.01);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(5,8,9,0.72) 54%, #050809 100%);
  z-index: -1;
  pointer-events: none;
}

.hero-content {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.hero-logo {
  width: min(520px, 92vw);
  margin: 0 0 clamp(26px, 6vh, 48px);
  filter: drop-shadow(0 18px 42px rgba(0,0,0,0.62));
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
}

.hero-copy {
  max-width: 760px;
  color: rgba(244,248,248,0.82);
}

/* What we solve: more contained, app-like, clickable layers instead of three static blocks. */
.solve-section {
  position: relative;
}

.solve-section::before {
  content: "";
  position: absolute;
  inset: 0 calc((100vw - min(var(--max), calc(100vw - 32px))) / 2) auto;
  height: 360px;
  background:
    radial-gradient(circle at 86% 10%, rgba(238,42,138,0.13), transparent 16rem),
    radial-gradient(circle at 16% 20%, rgba(72,199,194,0.12), transparent 18rem);
  pointer-events: none;
  z-index: -1;
}

.solve-system {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.solve-layer {
  --solve-edge-angle: 0deg;
  position: relative;
  width: 100%;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(72,199,194,0.11), transparent 10rem) padding-box,
    radial-gradient(circle at 94% 10%, rgba(238,42,138,0.05), transparent 12rem) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.078), rgba(255,255,255,0.022)) padding-box,
    rgba(7,14,15,0.88) padding-box,
    conic-gradient(from var(--solve-edge-angle),
      rgba(72,199,194,0.10) 0deg,
      rgba(72,199,194,0.10) 250deg,
      rgba(72,199,194,0.00) 284deg,
      rgba(72,199,194,0.80) 306deg,
      rgba(238,42,138,0.58) 330deg,
      rgba(255,255,255,0.62) 346deg,
      rgba(72,199,194,0.10) 360deg) border-box;
  box-shadow: 0 18px 62px rgba(0,0,0,0.34), 0 0 0 1px rgba(72,199,194,0.08);
  animation: solveBreath 6.8s ease-in-out infinite, solveEdgeRun 14s linear infinite;
  -webkit-tap-highlight-color: transparent;
  transition: transform 230ms ease, box-shadow 230ms ease;
}

.solve-layer:nth-child(2) { animation-delay: .45s, .45s; }
.solve-layer:nth-child(3) { animation-delay: .9s, .9s; }

.solve-layer::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(72,199,194,0.22);
  background: rgba(255,255,255,0.045);
  color: var(--cyan);
  font-weight: 900;
  box-shadow: 0 0 20px rgba(72,199,194,0.10);
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease;
}

.solve-layer.is-open::after {
  content: "–";
  transform: rotate(180deg);
  color: var(--text);
  border-color: rgba(238,42,138,0.28);
}

.solve-layer:hover,
.solve-layer:focus-visible,
.solve-layer.is-open {
  transform: translateY(-2px);
  outline: none;
  box-shadow:
    0 24px 78px rgba(0,0,0,0.46),
    0 0 0 1px rgba(72,199,194,0.15),
    0 0 36px rgba(72,199,194,0.14);
}

.solve-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding-right: 48px;
}

.solve-index {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #001314;
  background: linear-gradient(135deg, #76fff5, var(--cyan));
  box-shadow: 0 0 0 6px rgba(72,199,194,0.09), 0 0 24px rgba(72,199,194,0.34);
  font-size: 13px;
  font-weight: 900;
}

.solve-title {
  font-size: clamp(22px, 5.4vw, 30px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.solve-status {
  color: rgba(244,248,248,0.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.solve-body {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0 48px 0 54px;
  color: rgba(244,248,248,0.76);
  font-size: 16px;
  line-height: 1.55;
  transition: max-height 320ms ease, opacity 260ms ease, margin-top 320ms ease;
}

.solve-layer.is-open .solve-body {
  max-height: 190px;
  opacity: 1;
  margin-top: 18px;
}

@keyframes solveEdgeRun {
  to { --solve-edge-angle: 360deg; }
}

@keyframes solveBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 62px rgba(0,0,0,0.34), 0 0 0 1px rgba(72,199,194,0.08), 0 0 22px rgba(72,199,194,0.08);
  }
  50% {
    transform: translateY(-2px) scale(1.003);
    box-shadow: 0 22px 74px rgba(0,0,0,0.42), 0 0 0 1px rgba(72,199,194,0.16), 0 0 38px rgba(72,199,194,0.16), 0 0 18px rgba(238,42,138,0.055);
  }
}

@media (max-width: 860px) {
  .site-top-profile {
    min-height: 76px;
    padding: 0 24px;
  }
  .hero {
    padding: 96px 24px 36px;
  }
  .hero-logo {
    width: min(500px, 90vw);
    margin-bottom: clamp(26px, 5.5vh, 44px);
  }
  .hero-content {
    width: 100%;
  }
  .solve-layer {
    border-radius: 22px;
    padding: 19px;
  }
}

@media (max-width: 420px) {
  .site-top-profile {
    padding: 0 18px;
  }
  .top-title {
    letter-spacing: 0.18em;
    font-size: 12px;
  }
  .menu-toggle {
    width: 48px;
  }
  .menu-toggle span {
    width: 34px;
  }
  .hero {
    padding: 92px 20px 32px;
  }
  .hero-logo {
    width: min(500px, 92vw);
  }
  .solve-layer {
    padding: 18px;
  }
  .solve-head {
    gap: 4px 10px;
    padding-right: 44px;
  }
  .solve-index {
    width: 38px;
    height: 38px;
  }
  .solve-title {
    font-size: 24px;
  }
  .solve-body {
    margin-left: 48px;
    margin-right: 4px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solve-layer {
    animation: none !important;
  }
}

/* REV JAMi-PROFILE-1.6 - hero logo reposition + solve layers use modal system */
.hero {
  align-items: stretch;
  padding: 76px 20px 36px;
}

.hero-content {
  min-height: calc(100svh - 112px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-logo {
  width: min(520px, 92vw);
  margin-top: clamp(168px, 27vh, 278px);
  margin-bottom: auto;
}

.hero h1 {
  margin-top: 0;
}

.solve-system {
  gap: 14px;
}

.solve-layer {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 26px;
}

.solve-layer::after {
  display: none;
  content: none;
}

.solve-layer.is-active,
.solve-layer:hover,
.solve-layer:focus-visible {
  transform: translateY(-3px) scale(1.006);
  box-shadow:
    0 26px 82px rgba(0,0,0,0.48),
    0 0 0 1px rgba(72,199,194,0.18),
    0 0 42px rgba(72,199,194,0.16),
    0 0 24px rgba(238,42,138,0.07);
}

.solve-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.solve-copy strong {
  display: block;
  font-size: clamp(23px, 6vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.048em;
  font-weight: 950;
}

.solve-copy small {
  display: block;
  color: rgba(244,248,248,0.58);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 900;
}

.solve-index {
  flex: 0 0 auto;
}

.solve-body,
.solve-status,
.solve-head {
  display: none !important;
}

.solve-layer:active {
  transform: translateY(-1px) scale(0.995);
}

@media (max-width: 860px) {
  .hero {
    padding: 76px 24px 34px;
  }
  .hero-content {
    min-height: calc(100svh - 110px);
  }
  .hero-logo {
    margin-top: clamp(172px, 28vh, 272px);
  }
}

@media (max-width: 420px) {
  .hero {
    padding: 76px 20px 32px;
  }
  .hero-content {
    min-height: calc(100svh - 108px);
  }
  .hero-logo {
    width: min(500px, 92vw);
    margin-top: clamp(154px, 26vh, 238px);
  }
  .solve-layer {
    min-height: 118px;
    padding: 18px;
    gap: 14px;
  }
  .solve-copy strong {
    font-size: 24px;
  }
}


/* REV JAMi-PROFILE-1.7 - menu/contact cleanup + remove random glow blocks */
/* Keep hero logo position easy to adjust manually. Increase = lower, decrease = higher. */
:root {
  --hero-logo-top-mobile: 28px;
  --hero-logo-top-tablet: 34px;
}

@media (max-width: 860px) {
  .hero-logo {
    margin-top: var(--hero-logo-top-tablet) !important;
  }
}

@media (max-width: 420px) {
  .hero-logo {
    margin-top: var(--hero-logo-top-mobile) !important;
  }
}

/* Remove the rectangular cyan/magenta glow blocks behind content sections. */
.solve-section::before,
.ecosystem::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Dropdown menu: cleaner list, no pink/cyan dot markers. */
.profile-menu a {
  justify-content: flex-start;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.profile-menu a::after {
  content: none !important;
  display: none !important;
}

.profile-menu a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(72,199,194,0));
  transform: translateY(-50%);
  opacity: 0;
  transition: width 220ms ease, opacity 220ms ease;
}

.profile-menu a:hover,
.profile-menu a:focus-visible {
  padding-left: 30px;
  background: rgba(72,199,194,0.075);
  border-color: rgba(72,199,194,0.24);
}

.profile-menu a:hover::before,
.profile-menu a:focus-visible::before {
  width: 12px;
  opacity: 1;
}

/* Contact section: one clean CTA only. */
.contact-actions-single {
  justify-content: center;
}

.contact-actions-single .button {
  width: min(100%, 360px);
}

/* Modal points: remove pink dot feel; use a subtle cyan cue line instead. */
.modal-points li {
  padding-left: 18px;
}

.modal-points li::before {
  left: 0;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(72,199,194,0.78);
  box-shadow: 0 0 12px rgba(72,199,194,0.32);
  transform: translateY(-50%);
}

/* REV JAMi-PROFILE-1.12 - unified premium card system + brand/logo polish */
@property --jami-card-edge {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Shared card language: same graphite, cyan edge, soft breath across the profile. */
.solve-layer,
.eco-tile,
.rail-card,
.stat-card,
.brand-card,
.contact-card {
  --jami-card-edge: 0deg;
  border: 1px solid transparent !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(72,199,194,0.095), transparent 10rem) padding-box,
    radial-gradient(circle at 96% 4%, rgba(238,42,138,0.045), transparent 12rem) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.070), rgba(255,255,255,0.018)) padding-box,
    rgba(5,13,14,0.90) padding-box,
    conic-gradient(from var(--jami-card-edge),
      rgba(72,199,194,0.12) 0deg,
      rgba(72,199,194,0.10) 255deg,
      rgba(72,199,194,0.00) 286deg,
      rgba(72,199,194,0.72) 312deg,
      rgba(238,42,138,0.44) 333deg,
      rgba(255,255,255,0.44) 348deg,
      rgba(72,199,194,0.12) 360deg) border-box !important;
  box-shadow:
    0 20px 68px rgba(0,0,0,0.36),
    0 0 0 1px rgba(72,199,194,0.065),
    0 0 28px rgba(72,199,194,0.055) !important;
  animation: jamiCardEdge 16s linear infinite, jamiCardBreath 7.8s ease-in-out infinite;
}

.solve-layer:nth-child(2),
.eco-tile:nth-child(2),
.rail-card:nth-child(2),
.stat-card:nth-child(2),
.brand-card:nth-child(2) { animation-delay: .38s, .38s; }

.solve-layer:nth-child(3),
.eco-tile:nth-child(3),
.rail-card:nth-child(3),
.stat-card:nth-child(3),
.brand-card:nth-child(3) { animation-delay: .76s, .76s; }

.eco-tile:nth-child(4) { animation-delay: 1.14s, 1.14s; }
.eco-tile:nth-child(5) { animation-delay: 1.52s, 1.52s; }
.eco-tile:nth-child(6) { animation-delay: 1.90s, 1.90s; }
.eco-tile:nth-child(7) { animation-delay: 2.28s, 2.28s; }
.eco-tile:nth-child(8) { animation-delay: 2.66s, 2.66s; }

@keyframes jamiCardEdge {
  to { --jami-card-edge: 360deg; }
}

@keyframes jamiCardBreath {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 20px 68px rgba(0,0,0,0.36),
      0 0 0 1px rgba(72,199,194,0.065),
      0 0 24px rgba(72,199,194,0.05) !important;
  }
  50% {
    filter: brightness(1.045);
    box-shadow:
      0 26px 86px rgba(0,0,0,0.46),
      0 0 0 1px rgba(72,199,194,0.14),
      0 0 42px rgba(72,199,194,0.12),
      0 0 18px rgba(238,42,138,0.045) !important;
  }
}

.solve-layer:hover,
.solve-layer:focus-visible,
.solve-layer.is-active,
.eco-tile:hover,
.eco-tile:focus-visible,
.eco-tile.is-active,
.rail-card:hover,
.stat-card:hover,
.brand-card:hover,
.contact-card:hover {
  transform: translateY(-3px) scale(1.006);
  box-shadow:
    0 30px 92px rgba(0,0,0,0.52),
    0 0 0 1px rgba(72,199,194,0.18),
    0 0 46px rgba(72,199,194,0.15),
    0 0 24px rgba(238,42,138,0.065) !important;
}

.rail-card,
.stat-card,
.brand-card,
.contact-card {
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}

/* Why partners cards: remove old magenta strip, align to operating-system card language. */
.rail-card {
  min-height: 160px;
  display: grid;
  align-content: center;
  padding: clamp(22px, 5vw, 34px);
}

.rail-card::before {
  content: none !important;
  display: none !important;
}

.rail-card h3 {
  font-size: clamp(22px, 5.6vw, 30px);
  letter-spacing: -0.048em;
  margin-bottom: 14px;
}

.rail-card p {
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.52;
  color: rgba(244,248,248,0.72);
}

/* Experience at scale: same card system, clearer spacing, no generic grey slabs. */
.stats-grid {
  gap: 14px;
}

.stat-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(26px, 6vw, 42px);
}

.stat-card strong {
  text-shadow: 0 0 30px rgba(72,199,194,0.10);
}

.stat-card span {
  color: rgba(244,248,248,0.66);
}

/* Events gallery: keep clean image-only lightbox; slightly sharper premium thumbnails. */
.gallery-tile {
  border-color: rgba(72,199,194,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.gallery-tile:hover,
.gallery-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(72,199,194,0.36);
  box-shadow: 0 22px 70px rgba(0,0,0,0.42), 0 0 24px rgba(72,199,194,0.12);
  outline: none;
}

.gallery-tile span {
  display: none !important;
}

/* Trusted brands: only three approved logos, same visual system as the rest. */
.brand-wall-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-card {
  min-height: 132px;
  padding: clamp(22px, 5vw, 34px);
}

.brand-card img {
  max-width: 88%;
  max-height: 66px;
  filter: brightness(1.18) drop-shadow(0 0 18px rgba(255,255,255,0.06));
}

.brand-card:nth-child(2) img {
  max-height: 72px;
  max-width: 92%;
}

.brand-placeholder {
  display: none !important;
}

/* Bottom contact: make the final card feel like a closing scene, not a generic footer. */
.contact-card {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,199,194,0.18), transparent 20rem) padding-box,
    radial-gradient(circle at 92% 14%, rgba(238,42,138,0.10), transparent 18rem) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.078), rgba(255,255,255,0.020)) padding-box,
    rgba(5,13,14,0.94) padding-box,
    conic-gradient(from var(--jami-card-edge), rgba(72,199,194,0.12), rgba(238,42,138,0.40), rgba(255,255,255,0.42), rgba(72,199,194,0.12)) border-box !important;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(circle, rgba(72,199,194,0.14), transparent 62%);
  transform: translateY(-22%);
  pointer-events: none;
  opacity: .75;
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

.contact-logo {
  filter: drop-shadow(0 18px 42px rgba(0,0,0,0.52));
}

.contact-card .button-primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(118,255,245,0.40);
  background: linear-gradient(135deg, #5ee7dc 0%, #24979a 100%);
  color: #001314;
  box-shadow: 0 18px 54px rgba(72,199,194,0.24);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-card .button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.38) 45%, transparent 60%);
  transform: translateX(-130%);
  animation: ctaSweep 4.8s ease-in-out infinite;
}

.contact-card .button-primary:hover,
.contact-card .button-primary:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 24px 72px rgba(72,199,194,0.34);
}

@keyframes ctaSweep {
  0%, 42% { transform: translateX(-130%); }
  62%, 100% { transform: translateX(130%); }
}

/* Keep partner marks aligned after the final-card workover. */
.partner-logos {
  width: min(100%, 430px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: clamp(14px, 4vw, 26px) !important;
  opacity: .95 !important;
}

.partner-logos img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 14px rgba(72,199,194,0.16));
}

.partner-logos img:nth-child(1) { width: 132px !important; transform: translateY(3px); }
.partner-logos img:nth-child(2) { width: 72px !important; transform: translateY(0); }
.partner-logos img:nth-child(3) { width: 56px !important; transform: translateY(0); }

/* Modal: keep the outside edge animation subtle and premium. */
.ecosystem-modal-panel {
  --jami-card-edge: 0deg;
  border: 1px solid transparent !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(72,199,194,0.14), transparent 12rem) padding-box,
    radial-gradient(circle at 96% 10%, rgba(238,42,138,0.09), transparent 13rem) padding-box,
    linear-gradient(145deg, rgba(20,30,32,0.98), rgba(5,8,9,0.98)) padding-box,
    conic-gradient(from var(--jami-card-edge), rgba(72,199,194,0.14), rgba(238,42,138,0.36), rgba(255,255,255,0.34), rgba(72,199,194,0.14)) border-box !important;
  animation: jamiCardEdge 18s linear infinite;
}

@media (max-width: 860px) {
  .brand-wall-three {
    grid-template-columns: 1fr;
  }

  .brand-card {
    min-height: 118px;
  }

  .rail-card,
  .stat-card {
    min-height: 142px;
  }
}

@media (max-width: 420px) {
  :root {
    --hero-logo-top-mobile: 28px;
  }

  .brand-card img {
    max-height: 58px;
  }

  .brand-card:nth-child(2) img {
    max-height: 64px;
  }

  .partner-logos img:nth-child(1) { width: 118px !important; }
  .partner-logos img:nth-child(2) { width: 66px !important; }
  .partner-logos img:nth-child(3) { width: 52px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .solve-layer,
  .eco-tile,
  .rail-card,
  .stat-card,
  .brand-card,
  .contact-card,
  .ecosystem-modal-panel,
  .contact-card .button-primary::after {
    animation: none !important;
  }
}

/* REV JAMi-PROFILE-1.13 - neutral modal + simple bullet points */
/* Modal overlay remains blurred, but removes the coloured/hued treatment from the active panel. */
.modal {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(18px) saturate(0.9) !important;
  -webkit-backdrop-filter: blur(18px) saturate(0.9) !important;
}

.ecosystem-modal-panel {
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(145deg, rgba(18,24,25,0.965), rgba(5,8,9,0.985)) padding-box !important;
  box-shadow:
    0 34px 120px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.035),
    inset 0 1px 0 rgba(255,255,255,0.075) !important;
  animation: moduleOpen 380ms cubic-bezier(.2,.82,.18,1) both !important;
}

.modal[aria-hidden="false"] .ecosystem-modal-panel {
  animation: moduleOpen 380ms cubic-bezier(.2,.82,.18,1) both !important;
}

.modal.is-closing .ecosystem-modal-panel {
  animation: moduleClose 220ms ease both !important;
}

.ecosystem-modal-panel::before,
.ecosystem-modal-panel::after {
  content: none !important;
  display: none !important;
}

.ecosystem-modal-panel h2 {
  margin-bottom: 18px !important;
}

.ecosystem-modal-panel p {
  color: rgba(244,248,248,0.80) !important;
  font-size: clamp(17px, 4.4vw, 22px) !important;
  line-height: 1.48 !important;
  margin-bottom: 24px !important;
}

/* Replace boxed point rows with clean bullet points across all info modals. */
.modal-points {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.modal-points li {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 0 22px !important;
  color: rgba(244,248,248,0.78) !important;
  font-size: clamp(16px, 4vw, 20px) !important;
  line-height: 1.38 !important;
}

.modal-points li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.58em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(72,199,194,0.86) !important;
  box-shadow: 0 0 12px rgba(72,199,194,0.38) !important;
  transform: none !important;
}

.modal-close {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.075) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
}

.modal-close:hover,
.modal-close:focus-visible {
  border-color: rgba(72,199,194,0.42) !important;
  background: rgba(72,199,194,0.13) !important;
  outline: none !important;
}