:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #171a18;
  --muted: #5f6963;
  --line: #e7ece9;
  --green-900: #20392c;
  --green-800: #2c4e3c;
  --green-500: #5f8b73;
  --green-300: #a8c1b3;
  --green-200: #bed2c7;
  --green-100: #d7e4dd;
  --green-050: #edf3f0;
  --shadow: 0 14px 34px rgba(16, 33, 24, 0.12);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
}

a {
  color: inherit;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.site-shell {
  width: 100%;
  margin: 0;
  background: var(--paper);
  border: 0;
  position: relative;
  overflow: visible;
}

.site-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 80;
  min-height: 96px;
  padding: 24px 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.site-logo {
  width: 192px;
  height: 38px;
  overflow: hidden;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.78);
  transform-origin: 50% 56%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2));
}

.logo {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: rgba(14, 26, 19, 0.94);
  text-decoration: none;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  z-index: 2;
}

.nav-links a {
  font-size: 16px;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  letter-spacing: 0;
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.72;
}

.header-cta {
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 34px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: rgba(14, 22, 17, 0.9);
  border: 1px solid rgba(14, 22, 17, 0.95);
  margin-left: auto;
  z-index: 2;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 14, 12, 0.2);
}

.header-cta:active {
  transform: translateY(0);
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #d2d7d4;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  margin-left: auto;
  z-index: 3;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #111;
  margin: 4px auto;
}

.hero-section {
  width: 100%;
  min-height: max(100vh, 900px);
  height: max(100vh, 900px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(132deg, #6f8f7f 0%, #567665 46%, #345443 100%);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.hero-top-arc {
  position: absolute;
  top: -332px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1720px, 124vw);
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.76) 25%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.14) 58%,
    rgba(255, 255, 255, 0) 76%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-circle-a {
  top: -200px;
  left: -150px;
  width: 600px;
  height: 600px;
  background: rgba(255, 255, 255, 0.36);
  filter: blur(150px);
}

.hero-bg-circle-b {
  top: 30%;
  left: 10%;
  width: 450px;
  height: 450px;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(120px);
}

.hero-watermark {
  position: absolute;
  left: -24vw;
  right: -24vw;
  top: 104px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(18rem, 56vw, 48rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.71;
  color: rgba(255, 255, 255, 0.17);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.96) 38%,
    rgba(0, 0, 0, 0.42) 62%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.96) 38%,
    rgba(0, 0, 0, 0.42) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  width: 100%;
  height: max(100vh, 900px);
  min-height: max(100vh, 900px);
  gap: 0;
}

.hero-content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding-left: clamp(60px, 6.2vw, 100px);
  padding-right: clamp(40px, 4.4vw, 60px);
  padding-top: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.hero-content h1 {
  margin: 0 0 28px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(68px, 4.2vw, 72px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #090909;
  max-width: 620px;
}

.subheadline {
  margin: 0 0 44px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: rgba(18, 18, 18, 0.88);
  max-width: 520px;
}

.cta-button {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  text-decoration: none;
  color: #111111;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 100px;
  padding: 18px 34px;
  font-size: 17px;
  font-weight: 600;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 10px 24px rgba(20, 38, 29, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-button span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 17, 17, 0.16);
  color: #101010;
  font-size: 0.72rem;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(20, 38, 29, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.cta-button:hover span {
  background: #111;
  color: #fff;
}

.cta-button:active {
  transform: translateY(0);
}

.small-text {
  margin: 40px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(16, 16, 16, 0.75);
}

.hero-triangles {
  position: absolute;
  left: -80px;
  bottom: 120px;
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}

.hero-triangles::before,
.hero-triangles::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.hero-triangles::before {
  width: 280px;
  height: 280px;
  left: 0;
  bottom: 0;
  transform: rotate(-15deg);
  background: rgba(255, 255, 255, 0.35);
}

.hero-triangles::after {
  width: 240px;
  height: 240px;
  left: 56px;
  bottom: 20px;
  transform: rotate(5deg);
  background: rgba(255, 255, 255, 0.25);
}

.hero-image {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 4;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  position: relative;
  z-index: 6;
}

.overlay-text {
  position: absolute;
  bottom: 60px;
  right: 40px;
  font-family: "Outfit", sans-serif;
  font-size: 160px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.18;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.hero-image-blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14%;
  height: 50%;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(248, 252, 250, 0.98) 0%,
    rgba(248, 252, 250, 0.9) 26%,
    rgba(248, 252, 250, 0.62) 48%,
    rgba(248, 252, 250, 0.24) 72%,
    rgba(248, 252, 250, 0) 100%
  );
  filter: blur(44px);
  pointer-events: none;
  z-index: 8;
}

@media (max-width: 1440px) and (min-width: 1201px) {
  .hero-content {
    padding-left: 80px;
  }

  .hero-content h1 {
    font-size: 64px;
  }

  .subheadline {
    max-width: 480px;
  }
}

@media (max-width: 1200px) and (min-width: 769px) {
  .nav-links {
    gap: 30px;
  }

  .hero-section,
  .hero-container {
    min-height: 860px;
    height: 860px;
  }

  .hero-content {
    padding-left: 60px;
    padding-right: 40px;
    padding-top: 170px;
  }

  .hero-content h1 {
    font-size: 52px;
    line-height: 1.15;
  }

  .subheadline {
    font-size: 19px;
  }

  .overlay-text {
    font-size: 120px;
  }
}

.trust-strip {
  padding: 54px 52px 42px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.trust-strip h2 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.2;
}

.trust-logos {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
}

.trust-logos span {
  color: #6f7672;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section {
  padding: 56px 52px;
}

.problem-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.08fr 0.97fr;
  gap: 22px;
}

.problem-copy h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.08;
}

.problem-copy h3 span {
  color: var(--green-800);
}

.pill-btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
  color: #fff;
  background: var(--green-800);
  border: 1px solid var(--green-900);
  font-size: 0.77rem;
  font-weight: 700;
}

.pill-btn.small {
  margin-top: 0;
  padding: 8px 13px;
}

.problem-copy ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 11px;
}

.problem-copy li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.56;
}

.problem-copy li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green-800);
  font-weight: 800;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.problem-center img {
  width: 100%;
  min-height: 332px;
  height: 100%;
  object-fit: cover;
}

.problem-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.problem-side div {
  border-left: 3px solid var(--green-500);
  padding-left: 12px;
}

.problem-side h4 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
}

.problem-side p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.elea-orbit-section {
  background: linear-gradient(180deg, #f4fbfa 0%, #edf8f6 100%);
  border-top: 1px solid #dceae5;
  border-bottom: 1px solid #dceae5;
}

.elea-orbit-shell {
  padding: 14px;
  border-radius: 20px;
  border-color: #d6e7e2;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 251, 249, 0.98) 100%);
}

.elea-orbit-head {
  display: grid;
  gap: 6px;
}

.elea-orbit-head h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.elea-orbit-head p {
  margin: 0;
  color: #5f736d;
  line-height: 1.5;
}

.elea-orbit-stage {
  position: relative;
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid #d8eae5;
  background:
    radial-gradient(circle at 50% 50%, rgba(41, 191, 184, 0.16) 0%, rgba(41, 191, 184, 0) 52%),
    linear-gradient(180deg, #fcfefe 0%, #f2faf8 100%);
  min-height: 420px;
  height: clamp(420px, 62vw, 560px);
  overflow: hidden;
}

.elea-orbit-viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;
}

.elea-orbit-viewport.is-dragging {
  cursor: grabbing;
}

.elea-orbit-canvas {
  width: 760px;
  height: 560px;
  position: relative;
  transform-origin: 0 0;
}

.elea-orbit-lanes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.elea-orbit-lane {
  fill: none;
  stroke: #84bcb6;
  stroke-width: 1.25;
  stroke-opacity: 0.84;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s ease, stroke-width 0.18s ease, stroke-opacity 0.18s ease;
}

.elea-orbit-lane.is-active {
  stroke: #249f96;
  stroke-width: 2.1;
  stroke-opacity: 1;
}

.elea-orbit-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 999px;
  border: 1.5px solid #8bc6bf;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.96) 0%, rgba(233, 248, 246, 0.95) 68%, rgba(220, 242, 238, 0.88) 100%);
  display: grid;
  place-items: center;
  box-shadow:
    0 14px 22px rgba(18, 54, 49, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 2;
  pointer-events: none;
}

.elea-orbit-center img {
  width: 70px;
  height: auto;
  object-fit: contain;
}

.elea-orbit-node-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.elea-orbit-node {
  position: absolute;
  width: 112px;
  height: 42px;
  border: 1px solid #afdad4;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1a3f47;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.57rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  word-break: break-word;
  box-shadow:
    0 8px 14px rgba(25, 63, 59, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  transform: translate(-50%, -50%);
}

.elea-orbit-node:hover {
  transform: translate(-50%, calc(-50% - 1px));
  border-color: #6ebbb1;
}

.elea-orbit-node.is-active {
  border-color: #239f96;
  background: linear-gradient(180deg, #f2fffd 0%, #dcf6f3 100%);
  color: #123b36;
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow:
    0 10px 18px rgba(26, 97, 90, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.elea-orbit-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d7e7e3;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 22px rgba(24, 52, 49, 0.12);
  z-index: 6;
}

.elea-orbit-control {
  width: 40px;
  height: 40px;
  border: 0;
  border-bottom: 1px solid #d7e7e3;
  background: transparent;
  color: #235962;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.28rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.elea-orbit-control:last-child {
  border-bottom: 0;
}

.elea-orbit-control:hover {
  background: rgba(229, 246, 243, 0.86);
}

.elea-orbit-control:active {
  background: rgba(214, 238, 233, 0.96);
}

.elea-orbit-control svg {
  width: 17px;
  height: 17px;
}

.elea-orbit-control svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.elea-orbit-card {
  margin-top: 14px;
  border: 1px solid #d2e4df;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 14px;
}

.elea-orbit-card h4 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
  line-height: 1.2;
}

.elea-orbit-card p {
  margin: 8px 0 0;
  color: #4d6662;
  line-height: 1.56;
}

.about-block {
  background: #f7f8f7;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 286px minmax(460px, 640px);
  gap: 14px;
  justify-content: start;
  align-content: center;
  max-width: 1060px;
  padding-left: 52px;
  padding-right: 52px;
  align-items: center;
}

.about-photo {
  width: 100%;
  max-width: 286px;
  justify-self: start;
}

.about-copy {
  max-width: 640px;
  justify-self: start;
}

.about-photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.mini-label {
  margin: 0 0 10px;
  color: #7a807d;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
}

.about-copy h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  line-height: 1.14;
}

.about-copy p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.62;
}

.stat-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-row div {
  border: 1px solid #d5dcd8;
  border-radius: var(--radius-sm);
  padding: 10px;
}

.stat-row strong {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 1.08rem;
}

.stat-row small {
  color: #65706b;
  font-size: 0.78rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.section-head h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.55rem, 2.7vw, 2.2rem);
}

.switches {
  display: flex;
  gap: 8px;
}

.switches button {
  border: 1px solid #ced7d1;
  border-radius: 999px;
  background: #fff;
  color: #1f2a24;
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: inherit;
}

.switches .is-active {
  background: #101813;
  color: #fff;
  border-color: #101813;
}

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

.service-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.service-card h4 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
}

.service-card p {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  min-height: 40px;
}

.service-card img {
  border-radius: 10px;
  height: 162px;
  object-fit: cover;
  border: 1px solid #d8dfdb;
}

.progress-compare-chart {
  border-radius: 10px;
  height: 162px;
  border: 1px solid #d8dfdb;
  background: linear-gradient(160deg, #fbfefd 0%, #eef8f6 100%);
  padding: 7px 7px 6px;
  display: flex;
  flex-direction: column;
}

.progress-compare-legend {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.progress-compare-legend span {
  border-radius: 999px;
  padding: 2px 7px;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

.progress-compare-legend .legend-without {
  color: #5f6f67;
  background: #e7eeeb;
  border: 1px solid #d0dad5;
}

.progress-compare-legend .legend-with {
  color: #126f6b;
  background: rgba(41, 191, 184, 0.16);
  border: 1px solid rgba(41, 191, 184, 0.34);
}

.progress-compare-bars {
  margin-top: 4px;
  height: 118px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
}

.progress-col {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}

.progress-pair {
  width: 100%;
  height: 98px;
  border-bottom: 1px solid #dbe6e1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 0 1px;
}

.progress-bar {
  width: 6px;
  height: calc(var(--v) * 1%);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: progress_compare_rise 1.25s cubic-bezier(0.25, 1, 0.3, 1) both;
}

.progress-bar.without {
  background: #b8c6c0;
  border: 1px solid #aab8b2;
}

.progress-bar.with {
  background: linear-gradient(180deg, #64d6d0 0%, #29bfb8 100%);
  border: 1px solid #23a8a1;
}

.progress-col small {
  width: 100%;
  text-align: center;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #596b63;
  white-space: normal;
}

@keyframes progress_compare_rise {
  0% {
    transform: scaleY(0.08);
    opacity: 0.3;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.quality-radial {
  border-radius: 10px;
  height: 162px;
  border: 1px solid #d8dfdb;
  background: linear-gradient(160deg, #fbfefd 0%, #f2f8f6 100%);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quality-radial svg {
  width: 100%;
  height: auto;
  display: block;
}

.quality-arc-track {
  fill: none;
  stroke: #d5e0dc;
  stroke-width: 18;
  stroke-linecap: round;
}

.quality-arc-value {
  fill: none;
  stroke: #29bfb8;
  stroke-width: 18;
  stroke-linecap: round;
  animation: quality_arc_fill 1.5s ease-out both;
}

.quality-score-value {
  fill: #111f18;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
}

.quality-score-label {
  fill: #64706a;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
}

.quality-trend {
  margin-top: -2px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.74rem;
  color: #3d4a44;
}

.quality-trend strong {
  color: #1f2f29;
  font-weight: 600;
}

.quality-trend span {
  color: #68766f;
  font-weight: 500;
}

@keyframes quality_arc_fill {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 82 100;
  }
}

.radar-chart {
  border-radius: 10px;
  height: 162px;
  border: 1px solid #d8dfdb;
  background: linear-gradient(160deg, #f8fcfb 0%, #eef6f4 100%);
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.radar-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.radar-grid polygon {
  fill: none;
  stroke: #d8e2de;
  stroke-width: 1;
}

.radar-axes line {
  stroke: #e4ece8;
  stroke-width: 1;
}

.radar-area-stress {
  fill: rgba(41, 191, 184, 0.45);
  stroke: #29bfb8;
  stroke-width: 1.4;
}

.radar-area-risk {
  fill: rgba(37, 57, 47, 0.2);
  stroke: #33584a;
  stroke-width: 1.3;
}

.radar-labels text {
  fill: #5f6d67;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 8px;
  font-weight: 500;
  text-anchor: middle;
}

.radar-legend {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.66rem;
}

.radar-legend span {
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid transparent;
}

.radar-legend .legend-stress {
  color: #167f79;
  background: rgba(41, 191, 184, 0.12);
  border-color: rgba(41, 191, 184, 0.28);
}

.radar-legend .legend-risk {
  color: #2d4c41;
  background: rgba(37, 57, 47, 0.11);
  border-color: rgba(37, 57, 47, 0.24);
}

.carousel-dots {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #c2cbc6;
}

.carousel-dots .active {
  background: #161f1a;
  border-color: #161f1a;
}

.story-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.story-main {
  width: min(100%, 760px);
}

.story-main h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.72rem);
  line-height: 1.2;
}

.story-main h3 span {
  color: var(--green-800);
}

.story-main p {
  margin: 8px 0 10px;
  color: var(--muted);
  line-height: 1.48;
  font-size: 0.96rem;
}

.panic-media {
  position: relative;
  width: 100%;
}

.panic-base {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  aspect-ratio: 16/9;
  object-fit: cover;
}

.panic-overlay-gif {
  position: absolute;
  right: 3.8%;
  top: 30.2%;
  width: 41.7%;
  height: 51.6%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(23, 26, 24, 0.18);
  box-shadow: 0 14px 26px rgba(12, 22, 18, 0.22);
  z-index: 2;
}

.story-aside {
  padding: 14px;
}

.rate {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--green-800);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

.story-aside p {
  margin: 10px 0 12px;
  color: #5e6963;
  font-size: 0.9rem;
  line-height: 1.52;
}

.story-aside img {
  border-radius: 10px;
  border: 1px solid var(--line);
  max-width: 160px;
}

.video-zone {
  background: linear-gradient(180deg, #f1fcfb 0%, #e8f8f6 100%);
  padding-top: 38px;
  padding-bottom: 38px;
}

.text-link {
  text-decoration: none;
  border: 1px solid rgba(22, 34, 28, 0.35);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.74rem;
  font-weight: 700;
}

.video-panel {
  margin: 14px auto 0;
  max-width: 980px;
  position: relative;
}

.video-panel img {
  aspect-ratio: 16/8.4;
  object-fit: cover;
}

.video-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  background: rgba(22, 33, 27, 0.78);
  color: #f1f7f3;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  max-width: 420px;
}

.insights-head {
  align-items: end;
}

.insights {
  padding-top: 34px;
  padding-bottom: 30px;
}

.insights-head h3 {
  margin-bottom: 0;
}

.insights-head p {
  margin: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.96rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.thesis-insights-shell {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(226px, 0.32fr) 1fr;
  min-height: 470px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}

.thesis-insights-sidebar {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f7faf9 0%, #f3f7f5 100%);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.thesis-sidebar-label {
  margin: 0 4px 9px;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  line-height: 1;
}

.thesis-sidebar-brand {
  font-size: 1.52rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #0d1b15;
}

.thesis-sidebar-sub {
  margin-bottom: 2px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6864;
}

.thesis-sidebar-list {
  display: grid;
  gap: 6px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.thesis-feature-link {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 11px;
  text-align: left;
  padding: 8px 9px;
  color: #2f3f38;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.thesis-feature-link:hover {
  background: rgba(41, 191, 184, 0.08);
  border-color: rgba(41, 191, 184, 0.22);
  color: #162b25;
}

.thesis-feature-link.is-active {
  background: rgba(41, 191, 184, 0.14);
  border-color: rgba(41, 191, 184, 0.36);
  color: #102620;
}

.thesis-insights-main {
  padding: 15px 17px 16px;
  background: #fff;
  min-width: 0;
}

.thesis-feature-panel {
  display: none;
  animation: thesis_panel_in 0.28s ease;
}

.thesis-feature-panel.is-active {
  display: block;
}

.thesis-panel-head {
  margin-bottom: 10px;
  display: grid;
  gap: 8px;
}

.thesis-panel-badge {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #d7e2dd;
  background: #f4f7f6;
  color: #5b6762;
  padding: 5px 9px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.thesis-panel-head h4 {
  margin: 0;
  font-size: clamp(1.07rem, 1.65vw, 1.42rem);
  line-height: 1.16;
  color: #0d1613;
}

.thesis-panel-head p {
  margin: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 52ch;
}

.thesis-panel-copy {
  margin: 9px 0 11px;
  color: #313c37;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 68ch;
}

.thesis-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.thesis-panel-grid article {
  border: 1px solid #dce6e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbfa 0%, #f4f8f6 100%);
  padding: 8px 9px;
  min-width: 0;
}

.thesis-panel-grid small {
  display: block;
  color: #61706a;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.thesis-panel-grid strong {
  margin-top: 5px;
  display: block;
  color: #13231d;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.thesis-panel-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.thesis-panel-list li {
  position: relative;
  padding-left: 13px;
  color: #3f4b46;
  font-size: 0.82rem;
  line-height: 1.45;
}

.thesis-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #29bfb8;
  transform: translateY(-50%);
}

@keyframes thesis_panel_in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .thesis-insights-shell {
    grid-template-columns: minmax(206px, 0.37fr) 1fr;
    min-height: 438px;
  }

  .thesis-insights-main {
    padding: 14px 14px 15px;
  }

  .thesis-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .thesis-insights-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .thesis-insights-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }

  .thesis-sidebar-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .thesis-feature-link {
    width: max-content;
    min-width: 200px;
  }

  .thesis-insights-main {
    padding: 14px 14px 16px;
  }

  .thesis-panel-grid {
    grid-template-columns: 1fr;
  }
}

.follow-strip {
  margin: 0 52px 52px;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #e6ede9 0%, #c2d5ca 100%);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
  align-items: center;
}

.follow-strip img {
  max-width: 360px;
  border-radius: 14px;
}

.follow-strip h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.4rem, 2.1vw, 1.95rem);
  line-height: 1.17;
}

.follow-strip p {
  margin: 10px 0 16px;
  color: #43524a;
}

.site-footer {
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.footer-top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
}

.socials {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
  color: #84918b;
}

.newsletter {
  justify-self: end;
}

.newsletter label {
  display: block;
  margin-bottom: 6px;
  color: #4e5b54;
  font-size: 0.79rem;
  font-weight: 600;
}

.newsletter div {
  display: flex;
  border: 1px solid #d1d9d4;
  border-radius: 999px;
  overflow: hidden;
}

.newsletter input {
  border: 0;
  outline: 0;
  min-width: 220px;
  padding: 10px 12px;
  font-family: inherit;
}

.newsletter button {
  border: 0;
  width: 38px;
  background: var(--green-800);
  color: #fff;
  font-weight: 800;
}

.footer-links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.footer-links a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2f3b35;
}

.copyright {
  margin: 12px 0 0;
  color: #73817b;
  font-size: 0.77rem;
}

.legal-link {
  border: 0;
  background: transparent;
  color: #2a3832;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}

.legal-link:hover {
  color: #16231d;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.legal-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 15, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.legal-modal-panel {
  position: relative;
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  border-radius: 18px;
  border: 1px solid #d7e3de;
  background: #ffffff;
  box-shadow: 0 26px 56px rgba(9, 18, 14, 0.34);
  overflow: hidden;
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e6efeb;
  background: linear-gradient(180deg, #f2fcfb 0%, #ebf8f6 100%);
}

.legal-modal-header h2 {
  margin: 0;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #16231d;
}

.legal-close {
  border: 1px solid #c9d8d2;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: #1f2b26;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.legal-close:hover {
  background: #f4f8f6;
}

.legal-modal-content {
  padding: 18px 20px 22px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.legal-modal-content section + section {
  margin-top: 14px;
}

.legal-modal-content h3 {
  margin: 0 0 6px;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #102019;
  letter-spacing: -0.01em;
}

.legal-modal-content p,
.legal-modal-content li {
  margin: 0;
  color: #32423c;
  font-size: 0.88rem;
  line-height: 1.56;
}

.legal-modal-content ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
}

.legal-note {
  margin: 0 0 12px !important;
  padding: 10px 12px;
  border: 1px solid #cde2db;
  border-radius: 12px;
  background: #f4fbf9;
  color: #204038 !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

body.modal-open {
  overflow: hidden;
}

.footer-mark {
  margin-top: 22px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(4rem, 13vw, 9.2rem);
  font-weight: 800;
  line-height: 0.82;
  color: #e6ece9;
  letter-spacing: 0.04em;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .site-header,
  .trust-strip,
  .section,
  .follow-strip {
    padding-left: 28px;
    padding-right: 28px;
  }

  .hero-section,
  .hero-container {
    min-height: 820px;
    height: 820px;
  }

  .hero-content {
    padding-left: 60px;
    padding-right: 40px;
    padding-top: 160px;
  }

  .hero-content h1 {
    font-size: 52px;
    max-width: 560px;
  }

  .subheadline {
    font-size: 18px;
    max-width: 460px;
  }

  .hero-watermark {
    font-size: clamp(15rem, 56vw, 40rem);
  }

  .overlay-text {
    font-size: 120px;
    right: 24px;
    bottom: 48px;
  }

  .hero-image-blur {
    height: 46%;
    bottom: -15%;
  }

  .problem-grid,
  .story-block,
  .insight-grid,
  .follow-strip {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-strip {
    margin-left: 28px;
    margin-right: 28px;
  }

  .elea-orbit-stage {
    min-height: 410px;
    height: 520px;
  }

  .elea-orbit-canvas {
    width: 740px;
    height: 540px;
  }

  .about-block {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .about-photo {
    max-width: 260px;
  }
}

@media (max-width: 900px) {
  .elea-orbit-stage {
    min-height: 390px;
    height: 490px;
  }

  .elea-orbit-canvas {
    width: 700px;
    height: 520px;
  }

  .elea-orbit-node {
    width: 108px;
    height: 40px;
    font-size: 0.54rem;
    padding: 4px 7px;
  }

  .about-block {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-photo {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    margin-left: auto;
  }

  .site-header {
    min-height: 74px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .nav-links {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 74px;
    padding: 12px;
    display: grid;
    gap: 8px;
    background: #fff;
    border: 1px solid #d5ddd8;
    border-radius: 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  body.nav-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .header-cta {
    display: none;
  }

  .site-logo {
    width: 124px;
    height: 34px;
  }

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

  .hero-section {
    min-height: 0;
    height: auto;
  }

  .hero-top-arc {
    top: -250px;
    width: 130vw;
    height: 620px;
  }

  .hero-bg-circle-a,
  .hero-bg-circle-b {
    display: none;
  }

  .hero-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    height: auto;
  }

  .hero-content {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-width: 100%;
    padding: 120px 24px 40px;
  }

  .hero-content h1 {
    font-size: 38px;
    line-height: 1.16;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .subheadline {
    font-size: 17px;
    max-width: 100%;
    margin-bottom: 32px;
  }

  .cta-button {
    font-size: 16px;
    padding: 16px 28px;
  }

  .small-text {
    margin-top: 28px;
    font-size: 13px;
  }

  .hero-triangles {
    left: -58px;
    bottom: 44px;
    transform: scale(0.72);
  }

  .hero-image {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    min-height: 60vh;
    height: 60vh;
  }

  .hero-image img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }

  .overlay-text {
    font-size: 84px;
    right: 20px;
    bottom: 26px;
  }

  .hero-image-blur {
    height: 42%;
    bottom: -18%;
    filter: blur(30px);
  }

  .hero-watermark {
    left: -30vw;
    right: -30vw;
    top: 118px;
    font-size: clamp(10rem, 54vw, 18rem);
    line-height: 0.76;
  }

  .section-head,
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .newsletter {
    justify-self: stretch;
    width: 100%;
  }

  .newsletter div,
  .newsletter input {
    width: 100%;
  }

  .insight-side {
    grid-template-columns: 1fr;
  }

  .video-hint {
    position: static;
    margin: 10px;
    max-width: none;
  }

  .legal-modal-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }

  .legal-modal-header {
    padding: 14px 14px;
  }

  .legal-modal-content {
    padding: 14px 14px 16px;
    max-height: calc(100vh - 96px);
  }

  .elea-orbit-shell {
    padding: 10px;
  }

  .elea-orbit-stage {
    margin-top: 10px;
    min-height: 370px;
    height: 420px;
  }

  .elea-orbit-canvas {
    width: 660px;
    height: 490px;
  }

  .elea-orbit-center {
    width: 98px;
    height: 98px;
  }

  .elea-orbit-center img {
    width: 66px;
  }

  .elea-orbit-node {
    width: 102px;
    height: 38px;
    font-size: 0.52rem;
  }

  .elea-orbit-controls {
    right: 8px;
    bottom: 8px;
  }

  .elea-orbit-control {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
}

@media (max-width: 560px) {
  .site-shell {
    width: 100%;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .site-header,
  .trust-strip,
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .about-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .elea-orbit-canvas {
    width: 620px;
    height: 470px;
  }

  .elea-orbit-stage {
    min-height: 350px;
    height: 390px;
  }

  .elea-orbit-node {
    width: 96px;
    height: 36px;
    font-size: 0.49rem;
    line-height: 1.1;
    padding: 4px 6px;
  }

  .elea-orbit-center {
    width: 90px;
    height: 90px;
  }

  .elea-orbit-center img {
    width: 58px;
  }

  .elea-orbit-control {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }

  .elea-orbit-control svg {
    width: 15px;
    height: 15px;
  }

  .elea-orbit-card h4 {
    font-size: 1rem;
  }

  .elea-orbit-card p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .site-logo {
    width: 112px;
    height: 32px;
  }

  .hero-content {
    padding: 108px 20px 34px;
  }

  .hero-watermark {
    left: -34vw;
    right: -34vw;
    top: 136px;
    font-size: clamp(10rem, 58vw, 16.5rem);
  }

  .hero-triangles {
    transform: scale(0.58);
    left: -76px;
    bottom: 36px;
  }

  .hero-content h1 {
    font-size: clamp(2.05rem, 10vw, 2.65rem);
  }

  .subheadline {
    font-size: 16px;
  }

  .hero-image {
    height: 58vh;
    min-height: 360px;
  }

  .overlay-text {
    font-size: 64px;
    right: 12px;
    bottom: 18px;
  }

  .hero-image-blur {
    width: 120%;
    left: -10%;
    height: 40%;
    bottom: -14%;
  }

  .follow-strip {
    margin: 0 16px 36px;
    padding: 14px;
  }
}

/* FINAL HERO SPEC OVERRIDE */
.hero-section.secfi-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #f1f2ed;
  border-bottom: 0;
}

.hero-section.secfi-hero::before {
  content: "";
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, 120vw);
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.45) 42%,
    rgba(255, 255, 255, 0) 76%
  );
  pointer-events: none;
  z-index: 0;
}

.site-header.hero-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: 0;
  padding: 24px 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.hero-header .secfi-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.hero-header .secfi-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  transform: none;
  filter: none;
}

.hero-header .secfi-logo .logo-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: #1a1d1c;
}

.hero-header .nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 34px;
  z-index: 2;
}

.hero-header .nav-links a {
  font-size: 16px;
  font-weight: 500;
  color: #232826;
  text-decoration: none;
  letter-spacing: 0;
  opacity: 0.92;
}

.hero-header .nav-links a:hover {
  opacity: 0.65;
}

.hero-header .header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 3;
}

.hero-header .header-start {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-header .header-start {
  color: #fff;
  border: 1px solid #22292a;
  background: #252a2d;
}

.hero-header .header-start:hover {
  transform: translateY(-1px);
}

.hero-header .menu-toggle {
  display: none;
}

.secfi-hero .hero-container {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 47%) minmax(420px, 53%);
  align-items: end;
  gap: 0;
  padding: 124px 44px 26px;
}

.secfi-hero .hero-content {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px 56px 0;
  z-index: 5;
}

.secfi-hero .hero-content h1 {
  margin: 0 0 24px;
  max-width: 640px;
  font-family: "Inter", sans-serif;
  font-size: clamp(56px, 5.4vw, 80px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1c201f;
}

.secfi-hero .subheadline {
  margin: 0 0 34px;
  max-width: 520px;
  font-family: "Inter", sans-serif;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(30, 36, 34, 0.84);
}

.secfi-hero .cta-button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #232a2c;
  border: 1px solid #232a2c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
}

.secfi-hero .cta-button:hover {
  transform: translateY(-2px);
}

.secfi-hero .hero-image {
  grid-column: 2 / 3;
  position: relative;
  min-height: 740px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  z-index: 3;
}

.secfi-hero .hero-circle {
  position: absolute;
  width: min(640px, 88%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  right: 7%;
  bottom: 24px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.96), rgba(246, 246, 244, 0.84) 48%, rgba(230, 231, 227, 0.7) 100%),
    repeating-linear-gradient(130deg, rgba(170, 170, 170, 0.08) 0 3px, rgba(255, 255, 255, 0) 3px 24px);
  border: 1px solid rgba(205, 210, 204, 0.55);
  z-index: 2;
}

.secfi-hero .hero-image img {
  position: relative;
  width: auto;
  height: min(84vh, 780px);
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(22px);
  z-index: 6;
}

.secfi-hero .hero-float-card {
  position: absolute;
  right: 44%;
  top: 22%;
  width: min(296px, 38%);
  background: rgba(247, 248, 245, 0.9);
  border: 1px solid rgba(197, 202, 197, 0.8);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(52, 58, 54, 0.1);
  backdrop-filter: blur(2px);
  padding: 18px 18px 16px;
  z-index: 5;
}

.secfi-hero .hero-float-card h4 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: #232826;
}

.secfi-hero .hero-float-card .muted {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(35, 40, 38, 0.6);
}

.secfi-hero .hero-float-card strong {
  display: block;
  margin: 6px 0 14px;
  font-size: 32px;
  line-height: 1;
  color: #1f2422;
}

.secfi-hero .hero-chip-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.secfi-hero .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 36, 34, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #3b423f;
  background: #f1f2ef;
}

.secfi-hero .chip.active {
  color: #fff;
  background: #236d70;
  border-color: #236d70;
}

.secfi-hero .hero-float-pill {
  position: absolute;
  right: 2%;
  bottom: 28%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: rgba(247, 248, 245, 0.94);
  border: 1px solid rgba(197, 202, 197, 0.8);
  box-shadow: 0 10px 24px rgba(52, 58, 54, 0.12);
  color: #2a2f2d;
  font-size: 15px;
  font-weight: 600;
  z-index: 7;
}

.secfi-hero .hero-float-pill .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #176960;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.secfi-hero .hero-bottom-line {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 18px;
  height: 1px;
  background: rgba(52, 58, 54, 0.18);
  z-index: 5;
}

@media (max-width: 1200px) {
  .site-header.hero-header {
    padding: 20px 30px;
  }

  .hero-header .secfi-logo .logo-text {
    font-size: 52px;
  }

  .hero-header .nav-links {
    gap: 28px;
  }

  .secfi-hero .hero-container {
    grid-template-columns: minmax(360px, 46%) minmax(380px, 54%);
    padding: 118px 30px 24px;
  }

  .secfi-hero .hero-content h1 {
    font-size: clamp(50px, 5.1vw, 68px);
  }

  .secfi-hero .subheadline {
    font-size: clamp(18px, 1.8vw, 22px);
  }

  .secfi-hero .hero-image {
    min-height: 660px;
  }

  .secfi-hero .hero-image img {
    height: min(76vh, 700px);
    transform: translateX(10px);
  }

  .secfi-hero .hero-float-card {
    right: 40%;
    top: 22%;
    width: min(260px, 40%);
  }
}

@media (max-width: 900px) {
  .site-header.hero-header {
    padding: 18px 20px;
    gap: 12px;
  }

  .hero-header .secfi-logo .logo-text {
    font-size: 46px;
  }

  .hero-header .menu-toggle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(33, 38, 36, 0.18);
    background: rgba(255, 255, 255, 0.66);
    margin-left: auto;
  }

  .hero-header .header-start {
    padding: 10px 18px;
    font-size: 14px;
  }

  .hero-header .nav-links {
    display: none;
    margin: 0;
    left: auto;
    top: auto;
    transform: none;
  }

  body.nav-open .hero-header .nav-links {
    display: grid;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
    gap: 8px;
    background: #fff;
    border: 1px solid #d7dbd7;
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px;
    z-index: 120;
    transform: none;
  }

  .secfi-hero .hero-container {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 104px 20px 20px;
  }

  .secfi-hero .hero-content {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 0;
  }

  .secfi-hero .hero-content h1 {
    font-size: clamp(42px, 10vw, 64px);
    max-width: 95%;
  }

  .secfi-hero .subheadline {
    font-size: clamp(17px, 3.2vw, 20px);
    max-width: 100%;
  }

  .secfi-hero .hero-image {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    min-height: 520px;
  }

  .secfi-hero .hero-circle {
    width: min(520px, 94%);
    right: 50%;
    transform: translateX(50%);
    bottom: 10px;
  }

  .secfi-hero .hero-image img {
    height: min(64vh, 620px);
    transform: none;
  }

  .secfi-hero .hero-float-card {
    right: 45%;
    top: 20%;
    width: min(230px, 44%);
  }

  .secfi-hero .hero-float-pill {
    right: 5%;
    bottom: 30%;
    font-size: 14px;
  }

  .secfi-hero .hero-bottom-line {
    left: 20px;
    right: 20px;
    bottom: 12px;
  }
}

@media (max-width: 640px) {
  .hero-header .secfi-logo .logo-text {
    font-size: 40px;
  }

  .secfi-hero .hero-content h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .secfi-hero .subheadline {
    font-size: 16px;
    line-height: 1.4;
  }

  .secfi-hero .hero-image {
    min-height: 430px;
  }

  .secfi-hero .hero-image img {
    height: min(58vh, 520px);
  }

  .secfi-hero .hero-float-card {
    display: none;
  }

  .secfi-hero .hero-float-pill {
    right: 10px;
    bottom: 22%;
    padding: 8px 12px 8px 8px;
    gap: 8px;
    font-size: 13px;
  }

  .secfi-hero .hero-float-pill .dot {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* SECOND REFERENCE SECTION */
.strategy-stage {
  position: relative;
  min-height: min(980px, 100vh);
  padding: clamp(36px, 5.8vw, 76px) 0 clamp(54px, 7vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at -2% 98%, rgba(231, 151, 220, 0.5), rgba(231, 151, 220, 0) 62%),
    radial-gradient(980px 580px at 102% 8%, rgba(124, 160, 235, 0.58), rgba(124, 160, 235, 0) 66%),
    linear-gradient(136deg, #4f67a2 0%, #637ab5 44%, #8799ca 100%);
}

.strategy-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.045) 0 2px,
      rgba(255, 255, 255, 0) 2px 18px
    );
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
}

.strategy-board-shell {
  position: relative;
  width: min(96vw, 1750px);
  margin: 0 auto;
  perspective: 1400px;
  z-index: 2;
}

.strategy-board {
  position: relative;
  min-height: min(900px, 84vh);
  background: #def0f1;
  border: 1px solid rgba(141, 173, 178, 0.42);
  border-radius: 24px;
  padding: clamp(20px, 2.3vw, 34px) clamp(22px, 3vw, 44px) clamp(24px, 3vw, 38px);
  transform: rotate(-4.2deg);
  transform-origin: 50% 6%;
  box-shadow:
    0 44px 94px rgba(27, 40, 73, 0.38),
    0 14px 28px rgba(19, 31, 52, 0.24);
  overflow: hidden;
}

.strategy-topline {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.strategy-mail {
  font-size: 16px;
  font-weight: 500;
  color: #113641;
}

.strategy-mini-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.strategy-mini-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(16, 43, 51, 0.9);
}

.strategy-mini-nav a:hover {
  opacity: 0.7;
}

.strategy-top-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  background: #14813d;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.strategy-social {
  position: absolute;
  right: 22px;
  top: 118px;
  display: grid;
  gap: 14px;
  z-index: 8;
}

.strategy-social span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(162, 215, 220, 0.76);
  color: #1f5967;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}

.strategy-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, 46%) minmax(420px, 54%);
  gap: 8px;
  align-items: end;
}

.strategy-anna {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.strategy-anna::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: 18px;
  height: 78%;
  border-radius: 52% 48% 44% 56% / 54% 58% 42% 46%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.86), rgba(239, 250, 250, 0.72) 48%, rgba(214, 234, 238, 0.34) 100%);
  filter: blur(0.4px);
  z-index: 1;
}

.strategy-anna img {
  position: relative;
  width: min(760px, 132%);
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
  filter: drop-shadow(0 18px 30px rgba(20, 37, 52, 0.15));
  z-index: 3;
}

.strategy-copy {
  position: relative;
  z-index: 4;
  padding: 26px 24px 30px 10px;
}

.strategy-kicker {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(24, 70, 78, 0.72);
}

.strategy-copy h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(72px, 7.2vw, 114px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.86;
  color: #0f5664;
}

.strategy-lead {
  margin: 0 0 22px;
  max-width: 620px;
  font-family: "Inter", sans-serif;
  font-size: clamp(20px, 1.75vw, 29px);
  line-height: 1.36;
  color: rgba(21, 65, 76, 0.78);
}

.strategy-avatars {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.strategy-avatars .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #def0f1;
}

.strategy-avatars .a1 {
  background: linear-gradient(145deg, #ffb387, #f77f78);
}

.strategy-avatars .a2 {
  margin-left: -14px;
  background: linear-gradient(145deg, #8dc5ec, #6072d2);
}

.strategy-avatars .a3 {
  margin-left: -14px;
  background: linear-gradient(145deg, #f5d473, #f1a05a);
}

.strategy-avatars strong {
  margin-left: 8px;
  font-size: 28px;
  font-weight: 700;
  color: #114855;
}

.strategy-actions {
  display: flex;
  align-items: center;
}

.strategy-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 14px;
  padding: 13px 24px;
  background: #14813d;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.strategy-float-card {
  position: absolute;
  left: 42%;
  bottom: 156px;
  width: min(278px, 34%);
  background: rgba(238, 247, 239, 0.88);
  border: 1px solid rgba(198, 226, 205, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 36px rgba(36, 55, 62, 0.14);
  backdrop-filter: blur(3px);
  padding: 18px 20px;
  z-index: 6;
}

.strategy-float-card p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(28, 62, 71, 0.92);
}

.strategy-float-card div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.strategy-float-card strong {
  font-size: 44px;
  line-height: 0.95;
  color: #124d5a;
}

.strategy-float-card span {
  font-size: 14px;
  color: rgba(24, 68, 77, 0.78);
}

.strategy-metrics {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(100, 134, 144, 0.26);
  border-bottom: 1px solid rgba(100, 134, 144, 0.2);
}

.strategy-metrics div {
  padding: 16px 20px 18px;
}

.strategy-metrics div + div {
  border-left: 1px solid rgba(100, 134, 144, 0.22);
}

.strategy-metrics strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 4.2vw, 72px);
  color: #104f5e;
}

.strategy-metrics span {
  font-size: 17px;
  color: rgba(25, 64, 74, 0.75);
}

.strategy-brand-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.strategy-brand-row span {
  font-size: 22px;
  font-weight: 700;
  color: rgba(20, 58, 66, 0.82);
  letter-spacing: 0.02em;
}

@media (max-width: 1400px) {
  .strategy-board {
    transform: rotate(-3.2deg);
  }

  .strategy-main {
    grid-template-columns: minmax(390px, 45%) minmax(380px, 55%);
  }

  .strategy-copy h2 {
    font-size: clamp(62px, 6.8vw, 98px);
  }

  .strategy-float-card {
    left: 40%;
    bottom: 132px;
    width: min(244px, 33%);
  }
}

@media (max-width: 1180px) {
  .strategy-stage {
    min-height: auto;
    padding: 30px 0 60px;
  }

  .strategy-board {
    transform: rotate(-1.8deg);
    padding: 22px 22px 24px;
  }

  .strategy-topline {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .strategy-mini-nav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 14px;
  }

  .strategy-main {
    grid-template-columns: minmax(320px, 42%) minmax(360px, 58%);
  }

  .strategy-anna {
    min-height: 470px;
  }

  .strategy-anna img {
    width: min(620px, 132%);
  }

  .strategy-copy {
    padding: 12px 6px 20px;
  }

  .strategy-copy h2 {
    font-size: clamp(54px, 7.6vw, 84px);
  }

  .strategy-lead {
    font-size: clamp(18px, 2.2vw, 24px);
  }

  .strategy-float-card {
    left: 34%;
    bottom: 114px;
    width: min(220px, 35%);
    padding: 14px 16px;
  }

  .strategy-social {
    right: 12px;
    top: 104px;
    gap: 10px;
  }

  .strategy-social span {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .strategy-board {
    transform: none;
    border-radius: 16px;
  }

  .strategy-topline {
    grid-template-columns: 1fr;
  }

  .strategy-main {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .strategy-anna {
    min-height: auto;
    max-width: 520px;
    margin: 4px auto 0;
  }

  .strategy-copy {
    padding: 10px 2px 18px;
  }

  .strategy-copy h2 {
    font-size: clamp(46px, 10.2vw, 74px);
  }

  .strategy-lead {
    font-size: clamp(17px, 3.8vw, 23px);
    max-width: 100%;
  }

  .strategy-float-card {
    position: static;
    margin: 10px 0 0;
    width: min(100%, 320px);
  }

  .strategy-metrics strong {
    font-size: clamp(34px, 8.2vw, 54px);
  }

  .strategy-metrics span {
    font-size: 14px;
  }

  .strategy-brand-row span {
    font-size: 18px;
  }

  .strategy-social {
    display: none;
  }
}

@media (max-width: 640px) {
  .strategy-stage {
    padding: 20px 0 44px;
  }

  .strategy-board-shell {
    width: calc(100vw - 16px);
  }

  .strategy-board {
    padding: 16px 12px 16px;
    border-radius: 14px;
  }

  .strategy-mail {
    font-size: 13px;
  }

  .strategy-mini-nav a {
    font-size: 13px;
  }

  .strategy-top-cta {
    width: fit-content;
    padding: 10px 14px;
    font-size: 13px;
  }

  .strategy-copy h2 {
    font-size: clamp(40px, 11vw, 58px);
  }

  .strategy-lead {
    font-size: 16px;
    line-height: 1.45;
  }

  .strategy-main-cta {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }

  .strategy-metrics {
    grid-template-columns: 1fr;
  }

  .strategy-metrics div + div {
    border-left: 0;
    border-top: 1px solid rgba(100, 134, 144, 0.22);
  }
}

/* SECOND HERO REFERENCE FINAL */
#second-hero.strategy-stage {
  min-height: 112vh;
  padding: clamp(34px, 5.4vw, 74px) 0 clamp(54px, 8vw, 94px);
  background:
    radial-gradient(1020px 640px at -8% 100%, rgba(231, 151, 220, 0.62), rgba(231, 151, 220, 0) 62%),
    radial-gradient(980px 620px at 106% 6%, rgba(121, 145, 209, 0.64), rgba(121, 145, 209, 0) 66%),
    linear-gradient(140deg, #455f9e 0%, #647dba 44%, #8398cd 100%);
}

#second-hero .strategy-board-shell {
  width: min(95vw, 1700px);
  height: min(920px, 88vh);
  margin: 0 auto;
  perspective: 1600px;
}

#second-hero .strategy-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid rgba(153, 180, 186, 0.45);
  transform: rotate(-4.9deg);
  transform-origin: 50% 18%;
  box-shadow:
    0 50px 92px rgba(24, 37, 67, 0.42),
    0 18px 30px rgba(18, 29, 51, 0.25);
  padding: clamp(18px, 2.2vw, 30px) clamp(20px, 3vw, 42px) clamp(22px, 2.8vw, 34px);
  background:
    radial-gradient(66% 62% at 22% 72%, rgba(236, 249, 250, 0.95) 0%, rgba(228, 244, 246, 0.68) 57%, rgba(220, 239, 242, 0.2) 100%),
    linear-gradient(180deg, #e8f6f7 0%, #dceff1 100%);
}

#second-hero .strategy-topline {
  grid-template-columns: minmax(250px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(16px, 2vw, 28px);
}

#second-hero .strategy-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#second-hero .strategy-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

#second-hero .strategy-brand span {
  font-size: 16px;
  font-weight: 600;
  color: #10343d;
}

#second-hero .strategy-mini-nav {
  gap: 24px;
}

#second-hero .strategy-mini-nav a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(16, 43, 51, 0.92);
}

#second-hero .strategy-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

#second-hero .strategy-lang,
#second-hero .strategy-login {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: #1f3f47;
}

#second-hero .strategy-top-cta {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  background: #1a8a3d;
}

#second-hero .strategy-social {
  right: 16px;
  top: 118px;
  gap: 14px;
}

#second-hero .strategy-social span {
  width: 40px;
  height: 40px;
  background: rgba(164, 216, 221, 0.74);
  color: #1b5663;
  font-size: 14px;
}

#second-hero .strategy-main {
  grid-template-columns: minmax(420px, 46%) minmax(420px, 54%);
  min-height: calc(100% - 196px);
  align-items: end;
  gap: 6px;
}

#second-hero .strategy-anna {
  min-height: 560px;
  justify-content: flex-start;
}

#second-hero .strategy-anna::before {
  left: 9%;
  right: 9%;
  bottom: 22px;
  height: 78%;
}

#second-hero .strategy-anna img {
  width: min(760px, 136%);
  max-width: none;
  transform: translateX(-32px);
  filter: drop-shadow(0 16px 28px rgba(15, 32, 50, 0.16));
}

#second-hero .strategy-copy {
  padding: 16px 18px 22px 8px;
}

#second-hero .strategy-kicker {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(24, 70, 78, 0.74);
}

#second-hero .strategy-copy h2 {
  font-size: clamp(72px, 7.3vw, 116px);
  line-height: 0.84;
}

#second-hero .strategy-lead {
  max-width: 620px;
  font-size: clamp(22px, 1.78vw, 30px);
  line-height: 1.34;
}

#second-hero .strategy-float-card {
  left: 42%;
  bottom: 154px;
  width: min(272px, 34%);
  z-index: 7;
}

#second-hero .strategy-main-cta {
  border-radius: 12px;
  padding: 13px 24px;
}

#second-hero .strategy-metrics {
  margin-top: 8px;
}

#second-hero .strategy-brand-row {
  margin-top: 14px;
}

@media (max-width: 1200px) {
  #second-hero.strategy-stage {
    min-height: auto;
    padding: 26px 0 62px;
  }

  #second-hero .strategy-board-shell {
    width: min(97vw, 1480px);
    height: auto;
  }

  #second-hero .strategy-board {
    min-height: auto;
    height: auto;
    transform: rotate(-2.8deg);
    border-radius: 12px;
  }

  #second-hero .strategy-topline {
    grid-template-columns: 1fr auto;
  }

  #second-hero .strategy-mini-nav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 14px;
  }

  #second-hero .strategy-main {
    min-height: auto;
    grid-template-columns: minmax(330px, 44%) minmax(330px, 56%);
  }

  #second-hero .strategy-anna {
    min-height: 470px;
  }

  #second-hero .strategy-anna img {
    width: min(620px, 134%);
    transform: translateX(-14px);
  }

  #second-hero .strategy-copy h2 {
    font-size: clamp(56px, 7vw, 92px);
  }

  #second-hero .strategy-lead {
    font-size: clamp(18px, 2.15vw, 24px);
  }

  #second-hero .strategy-float-card {
    left: 37%;
    bottom: 114px;
    width: min(224px, 35%);
  }
}

@media (max-width: 900px) {
  #second-hero .strategy-board {
    transform: none;
    border-radius: 14px;
  }

  #second-hero .strategy-topline {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #second-hero .strategy-top-actions {
    justify-content: flex-start;
    gap: 12px;
  }

  #second-hero .strategy-social {
    display: none;
  }

  #second-hero .strategy-main {
    grid-template-columns: 1fr;
  }

  #second-hero .strategy-anna {
    min-height: auto;
    justify-content: center;
  }

  #second-hero .strategy-anna img {
    width: min(530px, 100%);
    transform: none;
  }

  #second-hero .strategy-copy {
    padding: 8px 2px 16px;
  }

  #second-hero .strategy-copy h2 {
    font-size: clamp(44px, 10.5vw, 74px);
  }

  #second-hero .strategy-lead {
    font-size: clamp(17px, 3.8vw, 22px);
    max-width: 100%;
  }

  #second-hero .strategy-float-card {
    position: static;
    width: min(100%, 320px);
    margin: 10px 0 0;
  }
}

@media (max-width: 640px) {
  #second-hero.strategy-stage {
    padding: 16px 0 44px;
  }

  #second-hero .strategy-board-shell {
    width: calc(100vw - 12px);
  }

  #second-hero .strategy-board {
    padding: 14px 10px 14px;
  }

  #second-hero .strategy-brand span {
    font-size: 13px;
  }

  #second-hero .strategy-mini-nav a,
  #second-hero .strategy-lang,
  #second-hero .strategy-login {
    font-size: 13px;
  }

  #second-hero .strategy-top-cta {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* ISO HERO FINAL REBUILD */
.iso-header {
  z-index: 1000;
  position: fixed;
  inset: 0% 0% auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(56px);
  backdrop-filter: blur(56px);
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  font-family: "Instrument Sans", "Inter", sans-serif;
}

.iso-header-inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 83rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  gap: 2rem;
}

.iso-logo {
  color: #000;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  text-decoration: none;
  gap: 0.75rem;
  flex-shrink: 0;
  position: relative;
  padding-right: 2rem;
}

.iso-logo-image {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.iso-logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  background: rgba(0, 0, 0, 0.1);
}

.iso-logo-mark {
  width: 1.875rem;
  height: 1.875rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.iso-logo-mark::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  right: -0.5rem;
  top: 50%;
  height: 1.5px;
  background: #1a1a1a;
  transform: translateY(-50%);
}

.iso-logo-mark span {
  display: none;
}

.iso-logo-text,
.brand-elea {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  font-style: normal;
  vertical-align: baseline;
}

.iso-logo-text {
  font-size: 2rem;
  line-height: 1;
}

.brand-elea {
  display: inline;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: "Instrument Sans", "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
  text-transform: lowercase !important;
  white-space: nowrap;
}

.iso-logo-text em,
.brand-elea em {
  font-family: "Instrument Serif", "Cormorant Garamond", serif;
  font-size: inherit;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  line-height: inherit;
}

.iso-header .iso-nav {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
}

.iso-header .iso-nav a {
  border-bottom: 1px solid transparent;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  padding: 0.25rem 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.15s ease;
}

.iso-header .iso-nav a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

.iso-join {
  outline-color: rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  color: #000;
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 10rem;
  outline-width: 1px;
  outline-style: solid;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 1rem;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  margin-left: auto;
  background: transparent;
  white-space: nowrap;
}

.iso-join:hover {
  background-color: rgba(0, 0, 0, 0.05);
  outline-color: rgba(0, 0, 0, 0.05);
}

.iso-hero {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 7.5rem 3.5rem 6.7rem;
  background: #fff;
  font-family: "Instrument Sans", "Inter", sans-serif;
}

.iso-hero-inner {
  width: 100%;
  max-width: 83rem;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-content: start;
  place-items: start stretch;
  display: grid;
}

.iso-copy {
  z-index: 10;
  display: block;
  position: relative;
}

.iso-copy .brand-elea {
  font-size: 1.14em !important;
  font-weight: 600 !important;
}

.iso-pill {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  background-color: #f2f2f2;
  border-radius: 3rem;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  place-content: center start;
  place-items: center start;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  display: inline-grid;
  overflow: clip;
  margin-bottom: 2.25rem;
}

.iso-pill-loader {
  width: 34px;
  height: 14px;
  position: relative;
  display: inline-block;
}

.iso-pill-circle {
  width: 7px;
  height: 7px;
  position: absolute;
  border-radius: 50%;
  background-color: #29bfb8;
  transform-origin: 50%;
  animation: iso_pill_circle_bounce 0.5s alternate infinite ease;
}

.iso-pill-circle:nth-child(1) {
  left: 2px;
  animation-delay: 0s;
}

.iso-pill-circle:nth-child(2) {
  left: 13px;
  animation-delay: 0.2s;
}

.iso-pill-circle:nth-child(3) {
  left: 24px;
  animation-delay: 0.3s;
}

.iso-pill-shadow {
  width: 7px;
  height: 2px;
  border-radius: 50%;
  background-color: rgba(5, 34, 31, 0.36);
  position: absolute;
  top: 12px;
  filter: blur(0.8px);
  transform-origin: 50%;
  animation: iso_pill_shadow_scale 0.5s alternate infinite ease;
}

.iso-pill-shadow:nth-child(4) {
  left: 2px;
  animation-delay: 0s;
}

.iso-pill-shadow:nth-child(5) {
  left: 13px;
  animation-delay: 0.2s;
}

.iso-pill-shadow:nth-child(6) {
  left: 24px;
  animation-delay: 0.3s;
}

@keyframes iso_pill_circle_bounce {
  0% {
    top: 10px;
    height: 2px;
    border-radius: 7px 7px 4px 4px;
    transform: scaleX(1.45);
  }
  40% {
    height: 7px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}

@keyframes iso_pill_shadow_scale {
  0% {
    transform: scaleX(1.45);
  }
  40% {
    transform: scaleX(1);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(0.35);
    opacity: 0.35;
  }
}

.iso-copy h1 {
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 3.35rem;
  font-weight: 400;
  line-height: 1.12;
  color: #000;
}

.iso-copy h1 em {
  font-family: "Instrument Serif", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
}

.iso-copy p {
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 1.25rem 0 0;
  max-width: 30rem;
}

.iso-copy p strong {
  color: #0f1b16;
  font-weight: 600;
}

.iso-feature-hover {
  position: relative;
  margin-top: 1.45rem;
  width: fit-content;
}

.iso-feature-trigger {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d8e3de;
  border-radius: 0.875rem;
  box-shadow: 0 10px 22px rgba(15, 31, 23, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.58rem 0.95rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.iso-feature-trigger p {
  margin: 0;
  color: #21332d;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.iso-feature-icon {
  width: 1.8rem;
  height: 1.45rem;
  display: inline-flex;
}

.iso-feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.iso-feature-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 0.55rem);
  width: min(24rem, 86vw);
  max-height: min(26rem, calc(100vh - 8rem));
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dce7e2;
  border-radius: 0.875rem;
  box-shadow: 0 20px 34px rgba(18, 35, 30, 0.13), 0 6px 14px rgba(18, 35, 30, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.8rem 0.9rem;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 30;
}

.iso-feature-popover ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.32rem;
}

.iso-feature-popover li {
  position: relative;
  margin: 0;
  border-radius: 0.625rem;
  background: linear-gradient(90deg, rgba(41, 191, 184, 0.09), rgba(41, 191, 184, 0));
  color: #263833;
  padding: 0.36rem 0.52rem 0.36rem 1.1rem;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.iso-feature-popover li::before {
  content: "";
  position: absolute;
  left: 0.46rem;
  top: 50%;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #29bfb8;
  transform: translateY(-50%);
}

.iso-feature-hover:hover .iso-feature-trigger,
.iso-feature-hover:focus-within .iso-feature-trigger {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 31, 23, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.iso-feature-hover:hover .iso-feature-popover,
.iso-feature-hover:focus-within .iso-feature-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.iso-form-row {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  align-items: center;
  margin-top: 2.25rem;
  display: flex;
}

.iso-form-row input {
  background-color: #f2f2f2;
  color: #000;
  border: 0;
  border-radius: 5rem;
  min-width: 19rem;
  height: 3rem;
  margin-bottom: 0;
  padding: 0.5rem 1rem 0.5rem 1.125rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
}

.iso-form-row input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.iso-form-row a {
  background-color: #000;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 5rem;
  align-items: center;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
}

.iso-form-row a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.iso-rotator-card {
  margin-top: 2.25rem;
  width: fit-content;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.iso-loader {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  height: auto;
  padding: 0;
  color: #6d7a76;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
  box-sizing: content-box;
}

.iso-loader-prefix {
  white-space: nowrap;
}

.iso-words {
  overflow: hidden;
  position: relative;
  height: 1.25em;
  display: flex;
  flex-direction: column;
}

.iso-words::after {
  content: none;
}

.iso-word {
  display: block;
  height: 1.25em;
  padding-left: 0.3rem;
  color: #29bfb8;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  animation: iso_word_spin 14s infinite;
}

@keyframes iso_word_spin {
  10% {
    transform: translateY(-102%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-202%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-302%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-402%);
  }

  100% {
    transform: translateY(-400%);
  }
}

.iso-proof {
  display: block;
  max-width: 30rem;
  letter-spacing: -0.015em;
  margin-top: 2.25rem;
}

.iso-proof p {
  margin: 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: 1.02rem;
  line-height: 1.6;
}

.iso-proof strong {
  color: #000;
  font-weight: 500;
}

.iso-proof .hero-proof-brand {
  font-size: 1.34em !important;
  font-weight: 600 !important;
}

.iso-media {
  z-index: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: -3rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.iso-media-frame {
  z-index: 1;
  border-radius: 2rem;
  width: min(100%, 39rem);
  aspect-ratio: 1250 / 1222;
  position: relative;
  overflow: clip;
  box-shadow: 0 12px 26px #00000024, 0 34px 58px #0000002b;
  background: #d7d7d7;
}

.iso-main-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.iso-main-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(4%);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.iso-main-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.iso-main-slide img {
  z-index: 2;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
}

.iso-privacy-blur {
  position: absolute;
  left: 6%;
  top: 7%;
  width: 43%;
  height: 15%;
  border-radius: 0.85rem;
  background: rgba(245, 251, 248, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  box-shadow: 0 6px 14px rgba(13, 32, 47, 0.18);
  z-index: 4;
  pointer-events: none;
}

.iso-floating-card {
  position: absolute;
  left: -2.8rem;
  top: 64%;
  transform: translateY(-50%);
  width: 20.5rem;
  height: 6.7rem;
  border-radius: 1rem;
  background: #fff;
  border: 0;
  box-shadow: 0 10px 24px #0d202f2e, 0 24px 46px #0d202f1a;
  overflow: hidden;
  z-index: 3;
}

.iso-card-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.62rem;
  padding: 0.62rem;
  align-items: center;
}

.iso-card-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.iso-card-slide img {
  width: 100%;
  height: 100%;
  max-height: 5.35rem;
  border-radius: 0.6rem;
  object-fit: cover;
  object-position: center;
}

.iso-card-gauge {
  width: 100%;
  height: 100%;
  max-height: 5.35rem;
  border-radius: 0.6rem;
  border: 1px solid #d8e3de;
  background: linear-gradient(165deg, #f8fcfb 0%, #eff7f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.2rem 0.15rem;
}

.iso-card-gauge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.iso-card-gauge-track {
  fill: none;
  stroke: #d5e1dc;
  stroke-width: 11;
  stroke-linecap: round;
}

.iso-card-gauge-value {
  fill: none;
  stroke: #29bfb8;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
}

.iso-card-slide.is-active .iso-card-gauge-value {
  animation: iso_card_fill_80 1.45s ease-out both;
}

.iso-card-gauge-label {
  fill: #11211a;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
}

@keyframes iso_card_fill_80 {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 80 100;
  }
}

.iso-card-radial-mini {
  width: 100%;
  height: 100%;
  max-height: 5.35rem;
  border-radius: 0.6rem;
  border: 1px solid #d8e3de;
  background: linear-gradient(165deg, #f8fcfb 0%, #eef7f5 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.28rem 0.16rem;
}

.iso-card-radial-mini svg {
  width: 100%;
  height: auto;
  display: block;
}

.iso-radial-base {
  fill: none;
  stroke: #d9e4df;
  stroke-width: 5;
}

.iso-radial-metric {
  fill: none;
  stroke: var(--ring);
  stroke-width: 5;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  stroke-dasharray: 0 100;
}

.iso-card-slide.is-active .iso-radial-metric {
  animation: iso_card_metric_fill 1.55s ease-out both;
}

.iso-radial-center {
  fill: #1b2e27;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

.iso-radial-center-sub {
  fill: #5f7069;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.iso-radial-mini-legend {
  margin-top: -0.06rem;
  width: 100%;
  display: grid;
  gap: 0.12rem;
  text-align: center;
  font-family: "Instrument Sans", "Inter", sans-serif;
  line-height: 1.12;
}

.iso-radial-mini-legend .neg {
  color: #b56f6f;
  font-size: 0.46rem;
  font-weight: 600;
}

.iso-radial-mini-legend .pos {
  color: #1d8f89;
  font-size: 0.46rem;
  font-weight: 600;
}

@keyframes iso_card_metric_fill {
  from {
    stroke-dasharray: var(--from) 100;
  }
  to {
    stroke-dasharray: var(--to) 100;
  }
}

.iso-card-meta strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.iso-card-meta small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.iso-dots {
  margin-top: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.iso-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  appearance: none;
  display: inline-block;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
  transition: all 200ms ease;
}

.iso-dots button.active {
  width: 0.8rem;
  height: 0.8rem;
  background: rgba(0, 0, 0, 0.4);
}

.iso-header .menu-toggle {
  display: none;
}

@media (max-width: 991px) {
  .iso-header {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .iso-header-inner {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .iso-logo-text {
    font-size: 1.7rem;
  }

  .iso-logo {
    padding-right: 1.7rem;
  }

  .iso-header .iso-nav {
    gap: 1.7rem;
  }

  .iso-header .iso-nav a {
    font-size: 0.9rem;
  }

  .iso-join {
    font-size: 0.9rem;
  }

  .iso-hero {
    padding: 7rem 2rem 5rem;
  }

  .iso-hero-inner {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .iso-copy h1 {
    font-size: 2.95rem;
    line-height: 1.1;
  }

  .iso-copy p {
    font-size: 1.1rem;
  }

  .iso-feature-popover {
    width: min(22rem, calc(100vw - 6rem));
  }

  .iso-loader {
    font-size: 1.02rem;
  }

  .iso-form-row {
    flex-flow: column;
    align-items: flex-start;
  }

  .iso-form-row input {
    min-width: 21rem;
    font-size: 1.1rem;
  }

  .iso-form-row a {
    font-size: 1.1rem;
  }

  .iso-media {
    margin-left: -2rem;
  }

  .iso-floating-card {
    width: 20.8rem;
    left: -2rem;
    box-shadow: 0 9px 20px #0d202f28, 0 20px 38px #0d202f1a;
  }
}

@media (max-width: 767px) {
  .iso-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .iso-header-inner {
    gap: 1rem;
  }

  .iso-logo {
    order: 1;
  }

  .iso-join {
    order: 2;
    margin-left: auto;
    margin-right: 0;
    display: inline-flex;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .iso-logo {
    z-index: 10;
    padding-right: 0;
  }

  .iso-logo::after {
    display: none;
  }

  .iso-header .menu-toggle {
    order: 3;
    display: inline-block;
    margin-left: 0;
    z-index: 10;
    position: relative;
  }

  .iso-header .iso-nav {
    order: 4;
    display: none;
    margin: 0;
    left: auto;
    top: auto;
    transform: none;
    flex: 0;
  }

  body.nav-open .iso-header .iso-nav {
    display: grid;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 66px;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px;
    z-index: 110;
  }

  .iso-hero {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .iso-hero-inner {
    grid-auto-flow: row;
  }

  .iso-copy h1 {
    font-size: 2.35rem;
  }

  .iso-feature-hover {
    width: 100%;
    max-width: 32rem;
  }

  .iso-feature-trigger {
    width: 100%;
  }

  .iso-feature-popover {
    position: relative;
    top: auto;
    margin-top: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border-width: 0;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      max-height 0.22s ease,
      margin-top 0.22s ease,
      padding 0.22s ease,
      border-color 0.22s ease;
  }

  .iso-feature-hover.is-open .iso-feature-popover {
    margin-top: 0.55rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-height: 18rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.8rem 0.9rem;
    border-width: 1px;
  }

  .iso-feature-popover li {
    font-size: 0.84rem;
  }

  .iso-rotator-card {
    width: fit-content;
    max-width: 100%;
    padding: 0;
  }

  .iso-loader {
    height: auto;
    font-size: 0.96rem;
  }

  .iso-form-row {
    flex-flow: row;
  }

  .iso-form-row input {
    height: 3.4rem;
    padding-left: 1.5rem;
    min-width: 14rem;
    font-size: 1.2rem;
  }

  .iso-form-row a {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.2rem;
  }

  .iso-proof {
    font-size: 1rem;
  }

  .iso-media {
    margin-left: 0;
    align-items: stretch;
  }

  .iso-media-frame {
    width: 100%;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.2rem;
  }

  .iso-floating-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 44rem;
    margin: -1.2rem auto 0;
    box-shadow: 0 8px 18px #0d202f22, 0 16px 30px #0d202f16;
  }

  .iso-dots {
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .iso-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .iso-logo-text {
    font-size: 1.45rem;
  }

  .iso-join {
    display: inline-flex;
    padding: 0.44rem 0.6rem;
    font-size: 0.74rem;
    line-height: 1.1;
  }

  .iso-hero {
    padding-top: 8rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .iso-pill {
    font-size: 0.875rem;
  }

  .iso-copy h1 {
    font-size: 2.15rem;
  }

  .iso-copy p {
    font-size: 1rem;
    max-width: 100%;
  }

  .iso-feature-trigger {
    padding: 0.52rem 0.82rem;
    gap: 0.66rem;
  }

  .iso-feature-trigger p {
    font-size: 0.9rem;
  }

  .iso-feature-icon {
    width: 1.55rem;
    height: 1.25rem;
  }

  .iso-feature-hover.is-open .iso-feature-popover {
    padding: 0.72rem 0.75rem;
  }

  .iso-rotator-card {
    width: fit-content;
    max-width: 100%;
    padding: 0;
  }

  .iso-loader {
    font-size: 0.9rem;
  }

  .iso-form-row {
    width: 100%;
    flex-flow: column;
    align-items: stretch;
  }

  .iso-form-row input {
    min-width: 12rem;
    height: 3.2rem;
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 0.7rem;
    width: 100%;
  }

  .iso-form-row a {
    text-align: center;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
  }

  .iso-proof {
    line-height: 1.3;
  }

  .iso-floating-card {
    margin-top: -0.8rem;
    box-shadow: 0 7px 16px #0d202f1f, 0 14px 26px #0d202f14;
  }

  .iso-media-frame {
    box-shadow: 0 9px 20px #00000024, 0 22px 40px #00000021;
  }
}

/* ISO WHY SECTION */
.iso-why-section {
  padding: 8.25rem 3.5rem 4.5rem;
  background: #fff;
}

.iso-why-container {
  width: 100%;
  max-width: 83rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 3rem;
}

.iso-why-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
}

.iso-why-title {
  margin: 0;
  letter-spacing: -0.01em;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.iso-italic-letter {
  font-family: "Instrument Serif", "Cormorant Garamond", serif;
  font-style: italic;
}

.iso-why-lead {
  margin: 0;
  max-width: 28rem;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

.iso-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.iso-why-card {
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  background: #fff;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center;
}

.iso-why-card-neon {
  border-color: rgba(41, 191, 184, 0.26);
  box-shadow:
    0 0 0 1px rgba(41, 191, 184, 0.2),
    0 0 10px 1px rgba(41, 191, 184, 0.24),
    0 0 18px 4px rgba(41, 191, 184, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.07);
}

.iso-why-card-neon::before {
  content: none;
}

.iso-why-card:hover {
  cursor: pointer;
  transform: scale(0.97);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
}

.iso-why-card-neon:hover {
  box-shadow:
    0 0 0 1px rgba(41, 191, 184, 0.26),
    0 0 12px 2px rgba(41, 191, 184, 0.3),
    0 0 22px 5px rgba(41, 191, 184, 0.12),
    0 14px 30px rgba(16, 44, 41, 0.2);
}

.iso-why-card:active {
  transform: scale(0.9);
}

.iso-why-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: #f2f2f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iso-why-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
}

.iso-why-icon svg {
  transition: transform 0.4s ease;
}

.iso-why-card-copy {
  display: grid;
  gap: 0.5rem;
  transition: transform 0.4s ease;
  transform-origin: top left;
}

.iso-why-card:hover .iso-why-card-copy {
  transform: scale(0.96);
}

.iso-why-card:hover .iso-why-icon svg {
  transform: scale(1.05);
}

.iso-why-card-copy h3 {
  margin: 0;
  color: #000;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.iso-why-card-copy p {
  margin: 0;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .iso-why-section {
    padding: 5rem 2rem 4.5rem;
  }

  .iso-why-container {
    gap: 2.5rem;
  }

  .iso-why-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .iso-why-title {
    font-size: 2.6rem;
  }

  .iso-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .iso-why-card {
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .iso-why-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .iso-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .iso-why-card {
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.1rem;
  }

  .iso-why-icon-wrap {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.72rem;
  }

  .iso-why-icon {
    width: 1.18rem;
    height: 1.18rem;
  }

  .iso-why-card-copy h3 {
    font-size: 1rem;
    line-height: 1.35;
  }

  .iso-why-card-copy p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

@media (max-width: 479px) {
  .iso-why-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .iso-why-title {
    font-size: 2.25rem;
    letter-spacing: -0.02em;
  }

  .iso-why-lead {
    font-size: 1rem;
  }

  .iso-why-grid {
    gap: 0.62rem;
  }

  .iso-why-card {
    gap: 0.62rem;
    padding: 0.85rem;
  }

  .iso-why-icon-wrap {
    width: 2.1rem;
    height: 2.1rem;
  }

  .iso-why-icon {
    width: 1.05rem;
    height: 1.05rem;
  }

  .iso-why-card-copy h3 {
    font-size: 0.93rem;
    line-height: 1.32;
  }

  .iso-why-card-copy p {
    font-size: 0.78rem;
    line-height: 1.35;
  }
}

/* ISO TYPOGRAPHY ON REST OF PAGE (NO LAYOUT CHANGES) */
main .section,
main .follow-strip,
.site-footer {
  font-family: "Instrument Sans", "Inter", sans-serif;
}

main .section :where(h1, h2, h3, h4, h5, h6),
main .follow-strip :where(h1, h2, h3, h4, h5, h6),
.site-footer :where(h1, h2, h3, h4, h5, h6) {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

main .section :where(p, li, a, small, label, input, button),
main .follow-strip :where(p, li, a, small, label, input, button),
.site-footer :where(p, li, a, small, label, input, button) {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

main .section :where(strong),
main .follow-strip :where(strong),
.site-footer :where(strong) {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

main .section :where(em),
main .follow-strip :where(em),
.site-footer :where(em) {
  font-family: "Instrument Serif", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
}