*, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    img { max-width: 100%; display: block; }

    :root {
      --black: #171617;
      --black-light: #1e1d1e;
      --black-lighter: #252425;
      --white: #ffffff;
      --cream: #f1ede4;
      --cream-dim: rgba(241, 237, 228, 0.7);
      --cream-muted: rgba(241, 237, 228, 0.5);
      --cream-subtle: rgba(241, 237, 228, 0.1);
      --accent: #009C6F;
      --accent-bright: #00b37f;
      --accent-dark: #007a57;
      --accent-glow: rgba(0, 156, 111, 0.4);
      --accent-dim: rgba(0, 156, 111, 0.15);
      --market-red: #C0392B;
      --border-dark: rgba(241, 237, 228, 0.1);
      --border-bright: rgba(241, 237, 228, 0.28);

      --font-main: 'Manrope', system-ui, -apple-system, sans-serif;

      --container-width: 1200px;
      --container-padding: clamp(20px, 5vw, 40px);
      --section-padding: clamp(80px, 12vw, 140px);
      --transition-fast: 0.15s ease;
      --transition-base: 0.3s ease;

    }

    body {
      background: var(--black);
      color: var(--cream);
      font-family: var(--font-main);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.5;
      overflow-x: hidden;
    }

    ::selection {
      background: var(--accent);
      color: var(--cream);
    }

    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
    }

    .cs {
      position: relative;
      background: var(--black);
    }

    .cs-image {
      position: relative;
      min-height: 790px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
    }

    .cs-image-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 0;
      filter: brightness(1.12) saturate(1.1);
    }

    .cs-image-bg--sealedworks { background-image: url('/assets/images/sealedworks-procurement-platform.webp'); }
    .cs-image-bg--wholesale   { background-image: url('/assets/images/wholesale-platform.webp'); }
    .cs-image-bg--leisure     { background-image: url('/assets/images/attractions-operator-platform.webp'); }
    .cs-image-bg--ice         { background-image: url('/assets/images/ice-producer-ops-platform.webp'); }
    .cs-image-bg--retail      { background-image: url('/assets/images/retail-intelligence-ops-platform.webp'); }
    .cs-image-bg--cranes      { background-image: url('/assets/images/crane-manufacturer-ops-platform.webp'); }
    .cs-image-bg--weddings    { background-image: url('/assets/images/atlas-aisle-wedding-platform.webp'); }
    .cs-image-bg--retailos    { background-image: url('/assets/images/retail-operating-system.webp'); }
    @media (max-width: 768px) {
      .cs-image-bg--sealedworks { background-image: url('/assets/images/sealedworks-procurement-platform-portrait.webp'); }
      .cs-image-bg--wholesale   { background-image: url('/assets/images/wholesale-platform-portrait.webp'); }
      .cs-image-bg--leisure     { background-image: url('/assets/images/attractions-operator-platform-portrait.webp'); }
      .cs-image-bg--ice         { background-image: url('/assets/images/ice-producer-ops-platform-portrait.webp'); }
      .cs-image-bg--retail      { background-image: url('/assets/images/retail-intelligence-ops-platform-portrait.webp'); }
      .cs-image-bg--cranes      { background-image: url('/assets/images/crane-manufacturer-ops-platform-portrait.webp'); }
      .cs-image-bg--weddings    { background-image: url('/assets/images/atlas-aisle-wedding-platform-portrait.webp'); }
      .cs-image-bg--retailos    { background-image: url('/assets/images/retail-operating-system-portrait.webp'); }
    }

    .cs-image-bg[data-placeholder] {
      filter: none;
      background:
        repeating-linear-gradient(
          135deg,
          rgb(var(--glow-tint) / 0.42) 0,
          rgb(var(--glow-tint) / 0.42) 2px,
          rgb(var(--glow-tint) / 0.28) 2px,
          rgb(var(--glow-tint) / 0.28) 4px
        ),
        linear-gradient(
          135deg,
          rgb(var(--glow-tint) / 0.85) 0%,
          rgb(var(--glow-tint) / 0.55) 50%,
          rgb(var(--glow-tint) / 0.85) 100%
        );
    }
    .cs-image-bg[data-placeholder]::after {
      content: 'Image placeholder · ' attr(data-placeholder);
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(241, 237, 228, 0.62);
      background: rgba(23, 22, 23, 0.55);
      padding: 8px 16px;
      border: 1px solid rgba(241, 237, 228, 0.15);
      border-radius: 999px;
      white-space: nowrap;
      backdrop-filter: blur(8px);
    }

    .cs-image-treatment {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse 55% 45% at 0% 0% in oklch,
          rgb(var(--glow-tint) / 0.55) 0%,
          rgb(var(--glow-tint) / 0.32) 30%,
          rgb(var(--glow-tint) / 0.12) 60%,
          rgb(var(--glow-tint) / 0) 100%
        ),
        radial-gradient(
          ellipse 55% 45% at 100% 0% in oklch,
          rgb(var(--glow-tint) / 0.55) 0%,
          rgb(var(--glow-tint) / 0.32) 30%,
          rgb(var(--glow-tint) / 0.12) 60%,
          rgb(var(--glow-tint) / 0) 100%
        ),
        linear-gradient(
          to bottom in oklch,
          rgb(var(--glow-tint) / 0.14) 0%,
          rgb(var(--glow-tint) / 0) 55%
        );
    }

    .cs-image-glow {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      --glow-tint: 23 22 23;
      background:
        radial-gradient(
          ellipse 58% 90% at 50% 100% in oklch,
          rgb(var(--glow-tint) / 0.6) 0%,
          rgb(var(--glow-tint) / 0.45) 35%,
          rgb(var(--glow-tint) / 0.22) 65%,
          rgb(var(--glow-tint) / 0.06) 88%,
          rgb(var(--glow-tint) / 0) 100%
        ),
        linear-gradient(
          to right in oklch,
          rgb(var(--glow-tint) / 0) 0%,
          rgb(var(--glow-tint) / 0.06) 10%,
          rgb(var(--glow-tint) / 0.22) 22%,
          rgb(var(--glow-tint) / 0.5) 33%,
          rgb(var(--glow-tint) / 0.78) 45%,
          rgb(var(--glow-tint) / 0.82) 50%,
          rgb(var(--glow-tint) / 0.78) 55%,
          rgb(var(--glow-tint) / 0.5) 67%,
          rgb(var(--glow-tint) / 0.22) 78%,
          rgb(var(--glow-tint) / 0.06) 90%,
          rgb(var(--glow-tint) / 0) 100%
        );
    }

    .cs-image-fade {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 55%;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(23, 22, 23, 0) 0%,
        rgba(23, 22, 23, 0.35) 40%,
        rgba(23, 22, 23, 0.88) 78%,
        rgba(23, 22, 23, 1) 100%
      );
    }

    .cs-image-content {
      position: relative;
      z-index: 4;
      text-align: center;
      max-width: 860px;
      padding: 180px var(--container-padding) 90px;
    }

    .cs-num {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin: 0 0 32px;
    }

    .cs-pills {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 0 0 36px;
    }

    .cs-pill {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 8px 14px;
      border: 1px solid rgba(241, 237, 228, 0.22);
      border-radius: 999px;
      color: var(--cream);
      background: linear-gradient(
        135deg,
        rgba(241, 237, 228, 0.1) 0%,
        rgba(241, 237, 228, 0.04) 100%
      );
      backdrop-filter: blur(18px) saturate(1.4);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 768px) {
      .cs-pills {
        display: grid;
        justify-content: center;
        justify-items: center;
      }
      .cs-pills .cs-pill {
        grid-row: 1;
        grid-column: 1;
        opacity: 0;
        transition: opacity 0.45s ease;
      }
      .cs-pills .cs-pill.is-active { opacity: 1; }
    }

    .cs-title {
      font-size: clamp(36px, 5.6vw, 72px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin: 0;
      color: var(--cream);
      text-wrap: balance;
    }

    .cs-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 56px auto 0;
      color: var(--cream);
      text-decoration: none;
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: inherit;
      transition: opacity 0.25s ease;
      position: relative;
    }
    @media (hover: hover) {
      .cs-indicator:hover { opacity: 1; }
    }

    .cs-indicator--05 {
      flex-direction: column;
      gap: 3px;
      width: 22px;
    }
    .cs-indicator--05 svg {
      width: 18px;
      height: 10px;
      stroke: var(--cream);
      opacity: 0.25;
      animation: cs-i-stack 1.8s ease-in-out infinite;
    }
    .cs-indicator--05 svg:nth-child(2) { animation-delay: 0.25s; }
    .cs-indicator--05 svg:nth-child(3) { animation-delay: 0.5s; }
    @keyframes cs-i-stack {
      0%, 100% { opacity: 0.2; }
      50%      { opacity: 0.95; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cs-indicator--05 svg { animation: none; opacity: 0.7; }
    }

    @media (max-width: 1024px) {
      .opener { background-attachment: scroll; }
    }
    @media (prefers-reduced-motion: reduce) {
      .opener { background-attachment: scroll; }
    }
    @media (hover: none) and (pointer: coarse) {
      .opener { background-attachment: scroll; }
    }

    .cs-copy {
      font-size: 18px;
      line-height: 1.6;
      color: var(--cream-dim);
      margin: 28px auto 0;
      max-width: 640px;
      font-weight: 400;
      text-wrap: pretty;
    }

    .cs-preview {
      background: var(--black);
      padding: 0 0 140px;
      position: relative;
    }

    .cs-preview-frame { position: relative; z-index: 2; }

    .cs-callouts {
      position: relative;
      z-index: 2;
      margin: 56px auto 0;
      max-width: 1000px;
    }

    .cs-callouts--acc {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 48px;
      row-gap: 22px;
      align-items: start;
    }
    .cs-callout { background: none; padding: 0; }
    .cs-callout:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
    .cs-callout:nth-child(2) { grid-column: 2; grid-row: 1; padding-bottom: 22px; border-bottom: 1px solid var(--border-dark); }
    .cs-callout:nth-child(3) { grid-column: 2; grid-row: 2; }

    .cs-callouts--acc .cs-callout-q {
      display: block;
      width: 100%;
      padding: 0;
      background: none;
      border: 0;
      text-align: left;
      font: inherit;
      color: inherit;
      cursor: default;
      pointer-events: none;
    }
    .cs-callouts--acc .cs-callout-chip,
    .cs-callouts--acc .cs-callout-icon { display: none; }

    .cs-callout-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin: 0 0 12px;
    }
    .cs-callout-text {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--cream-dim);
      margin: 0;
      text-wrap: pretty;
    }

    .cs-callout:nth-child(1) .cs-callout-label { margin: 0 0 14px; }
    .cs-callout:nth-child(1) .cs-callout-text { font-size: 18px; line-height: 1.5; color: var(--cream); max-width: 460px; }
    .cs-callout:nth-child(2) .cs-callout-label,
    .cs-callout:nth-child(3) .cs-callout-label { margin: 0 0 8px; }
    .cs-callout:nth-child(2) .cs-callout-text,
    .cs-callout:nth-child(3) .cs-callout-text { font-size: 13.5px; }

    @media (max-width: 768px) {
      .cs-callouts.cs-callouts--acc {
        display: block;
        margin-top: 28px;
      }
      .cs-callouts--acc .cs-callout {
        grid-column: auto;
        grid-row: auto;
        padding: 0;
        border-bottom: 1px solid var(--border-dark);
      }
      .cs-callouts--acc .cs-callout:first-child { border-top: 1px solid var(--border-dark); }

      .cs-callouts--acc .cs-callout-q {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 2px;
        min-height: 44px;
        cursor: pointer;
        pointer-events: auto;
      }
      .cs-callouts--acc .cs-callout-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        color: var(--accent-bright);
        background: rgba(0, 156, 111, 0.1);
        border: 1px solid rgba(0, 156, 111, 0.2);
      }
      .cs-callouts--acc .cs-callout-chip svg { width: 17px; height: 17px; }
      .cs-callouts--acc .cs-callout-label {
        margin: 0;
        flex: 1;
        color: var(--cream);
      }
      .cs-callouts--acc .cs-callout-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        color: rgba(241, 237, 228, 0.45);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
      }
      .cs-callouts--acc .cs-callout-icon svg { width: 18px; height: 18px; }
      .cs-callouts--acc .cs-callout[data-open="true"] .cs-callout-icon { transform: rotate(180deg); color: var(--cream); }

      .cs-callouts--acc .cs-callout-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .cs-callouts--acc .cs-callout[data-open="true"] .cs-callout-a { max-height: 320px; }
      .cs-callouts--acc .cs-callout-text {
        margin: 0;
        padding: 0 2px 16px 50px;
        font-size: 14px;
      }
    }
    @media (hover: hover) {
      .cs-callouts--acc .cs-callout-q:hover .cs-callout-icon { color: var(--cream); }
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-callouts--acc .cs-callout-a,
      .cs-callouts--acc .cs-callout-icon { transition: none; }
    }

    .cs-preview-cta {
      position: relative;
      z-index: 2;
      margin-top: 56px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media (max-width: 480px) {
      .cs-preview-cta .btn { width: 100%; }
    }

    .device {
      position: relative;
      margin: 0 auto;
      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
    }

    .device-screen {
      position: relative;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(0, 156, 111, 0.05) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0c 0%, #050507 100%);
      overflow: hidden;
    }
    .device-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 25%,
        transparent 75%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }
    .device-screen::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 11;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    }
    .device-screen-label {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: rgba(241, 237, 228, 0.32);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      pointer-events: none;
      z-index: 5;
    }
    .device-screen-label span:last-child {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: none;
      font-weight: 400;
      color: rgba(241, 237, 228, 0.22);
    }

    .device--laptop {
      width: 100%;
      max-width: 1180px;
    }
    .device--laptop .device-lid {
      position: relative;
      padding: 9px;
      background: linear-gradient(180deg, #d8d4cc 0%, #c0bcb4 35%, #a8a49c 70%, #908c84 100%);
      border-radius: 16px 16px 4px 4px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: none;
    }
    .device--laptop .device-bezel {
      position: relative;
      padding: 14px 8px 10px;
      background: linear-gradient(180deg, #0a0a0c 0%, #060608 100%);
      border-radius: 10px 10px 2px 2px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .device--laptop .device-camera {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      background: #050507;
      border-radius: 50%;
      box-shadow:
        inset 0 0 1px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(60, 60, 65, 0.4);
      z-index: 3;
    }
    .device--laptop .device-screen {
      aspect-ratio: 1440 / 900;
      border-radius: 2px;
    }
    .device--laptop .device-base {
      position: relative;
      height: 18px;
      margin: 0 -2.5%;
      background: linear-gradient(180deg, #c4c0b8 0%, #a8a49c 50%, #807c74 100%);
      border-radius: 0 0 10px 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.35);
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      border-left: 1px solid rgba(255, 255, 255, 0.15);
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    .device--laptop .device-base::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 5px;
      background: linear-gradient(180deg, #1a1a1d 0%, #050507 100%);
      border-radius: 0 0 6px 6px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.95);
    }

    .device--tablet {
      width: 100%;
      max-width: 880px;
    }
    .device--tablet .device-frame {
      position: relative;
      padding: 8px;
      background: linear-gradient(135deg, #d8d4cc 0%, #b8b4ac 50%, #908c84 100%);
      border-radius: 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    }
    .device--tablet .device-bezel {
      position: relative;
      padding: 22px;
      background: linear-gradient(135deg, #0a0a0c 0%, #050507 100%);
      border-radius: 26px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .device--tablet .device-camera {
      position: absolute;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background: #050507;
      border-radius: 50%;
      box-shadow:
        inset 0 0 1px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(60, 60, 65, 0.4);
      z-index: 3;
    }
    .device--tablet .device-screen {
      aspect-ratio: 1024 / 768;
      border-radius: 4px;
    }

    .device--mobile {
      width: 100%;
      max-width: 360px;
    }
    .device--mobile .device-frame {
      position: relative;
      padding: 5px;
      background: linear-gradient(155deg, #d8d4cc 0%, #b8b4ac 45%, #908c84 100%);
      border-radius: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    }
    .device--mobile .device-bezel {
      position: relative;
      padding: 4px;
      background: #050507;
      border-radius: 22px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    }
    .device--mobile .device-screen {
      aspect-ratio: 390 / 790;
      border-radius: 18px;
    }
    .device--mobile .device-notch {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 28px;
      background: #050507;
      border-radius: 14px;
      z-index: 13;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        inset 0 1px 1px rgba(0, 0, 0, 0.5);
    }
    .device--mobile .device-side-btn {
      position: absolute;
      background: linear-gradient(90deg, #807c74 0%, #b8b4ac 50%, #807c74 100%);
      border-radius: 1px;
      z-index: 2;
    }
    .device--mobile .device-side-btn--power {
      right: -2px;
      top: 120px;
      width: 3px;
      height: 60px;
      border-radius: 0 2px 2px 0;
    }
    .device--mobile .device-side-btn--vol-up {
      left: -2px;
      top: 110px;
      width: 3px;
      height: 36px;
      border-radius: 2px 0 0 2px;
    }
    .device--mobile .device-side-btn--vol-down {
      left: -2px;
      top: 158px;
      width: 3px;
      height: 36px;
      border-radius: 2px 0 0 2px;
    }

    @media (max-width: 768px) {
      .device--laptop { max-width: 100%; }
      .device--tablet { max-width: 86%; }
      .device--mobile { max-width: 280px; }

      .device--laptop .device-lid { padding: 6px; border-radius: 12px 12px 3px 3px; }
      .device--laptop .device-bezel { padding: 10px 6px 7px; border-radius: 7px 7px 2px 2px; }
      .device--laptop .device-base { height: 13px; }
      .device--laptop .device-base::before { width: 80px; height: 3px; }

      .device--tablet .device-frame { padding: 6px; border-radius: 24px; }
      .device--tablet .device-bezel { padding: 16px; border-radius: 19px; }

      .device--mobile .device-frame { padding: 4px; border-radius: 21px; }
      .device--mobile .device-bezel { padding: 3px; border-radius: 17px; }
      .device--mobile .device-screen { border-radius: 14px; }
      .device--mobile .device-notch { top: 11px; width: 78px; height: 22px; border-radius: 11px; }

      .device-screen-label { font-size: 9px; letter-spacing: 0.18em; }
      .device-screen-label span:last-child { font-size: 9px; }
    }

    .cs-device { text-align: center; }
    .cs-device-stage { position: relative; display: flex; justify-content: center; align-items: center; padding: 10px 0 6px; }

    .cs-device .cd-dev { display: none; }
    @media (min-width: 1024px) { .cs-device .cd-laptop { display: block; } }
    @media (min-width: 768px) and (max-width: 1023px) { .cs-device .cd-tablet { display: block; } }
    @media (max-width: 767px) { .cs-device .cd-mobile { display: block; } }

    .cs-device .device-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; z-index: 1; }
    .cs-device .cd-shot:not([src]) { display: none; }

    .cs-device .device--mobile .device-screen { display: flex; flex-direction: column; }
    .cs-device .device--mobile .device-statusbar {
      position: relative; z-index: 12; flex: none; height: 6.4%; min-height: 44px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 26px 0 24px; color: #f1ede4; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    }
    .cs-device .dsb-ind { display: flex; align-items: center; gap: 6px; }
    .cs-device .dsb-ind svg { display: block; }

    .cs-device-tabs {
      display: inline-flex; gap: 4px; margin: 0 auto 22px; padding: 4px;
      background: var(--black-light); border: 1px solid var(--border-dark); border-radius: 999px;
    }
    .cs-device-tab {
      appearance: none; border: 0; background: none; color: var(--cream-dim);
      font: inherit; font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 999px; cursor: pointer; min-height: 40px;
    }
    .cs-device-tab.is-active { background: var(--accent); color: #fff; }
    @media (hover: hover) {
      .cs-device-tab:not(.is-active):hover { color: var(--cream); }
    }

    .cs-device-dots { display: none; }
    .cs-device-dot {
      appearance: none; border: 0; background: none; cursor: pointer;
      min-height: 44px; min-width: 22px; padding: 0 4px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cs-device-dot-fill {
      position: relative; display: block; width: 7px; height: 7px; border-radius: 999px;
      background: rgba(241, 237, 228, 0.28);
      transition: width .45s cubic-bezier(.4, 0, .2, 1), background .45s ease;
      overflow: hidden;
    }
    .cs-device-dot.is-active .cs-device-dot-fill { width: 30px; background: var(--accent); }
    .cs-device-dots.is-playing .cs-device-dot.is-active .cs-device-dot-fill { background: rgba(0, 156, 111, 0.22); }
    .cs-device-dots.is-playing .cs-device-dot.is-active .cs-device-dot-fill::after {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
      background: var(--accent); border-radius: 999px;
      animation: csd-fill var(--csd-int, 4200ms) linear forwards;
    }
    @keyframes csd-fill { from { width: 0; } to { width: 100%; } }
    @media (hover: hover) {
      .cs-device-dot:not(.is-active):hover .cs-device-dot-fill { background: rgba(241, 237, 228, 0.5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-device-dots.is-playing .cs-device-dot.is-active .cs-device-dot-fill { background: var(--accent); }
      .cs-device-dots.is-playing .cs-device-dot.is-active .cs-device-dot-fill::after { display: none; }
    }

    @media (max-width: 767px) {
      .cs-device-tabs { display: none; }
      .cs-device-dots {
        --csd-int: 4200ms;
        display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 0;
      }
    }

    .device-fan {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      isolation: isolate;
    }
    .device-fan .device--mobile {
      margin: 0;
    }
    .device-fan .device--mobile.fan-center {
      position: relative;
      z-index: 3;
    }
    .device-fan .device--mobile.fan-side {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      max-width: 360px;
      z-index: 1;
      pointer-events: none;
      filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
    }
    .device-fan .device--mobile.fan-left {
      transform: translate(-50%, -50%) translateX(-44%) rotate(-11deg) scale(0.92);
      transform-origin: center;
    }
    .device-fan .device--mobile.fan-right {
      transform: translate(-50%, -50%) translateX(44%) rotate(11deg) scale(0.92);
      transform-origin: center;
    }

    @media (max-width: 1024px) and (min-width: 769px) {
      .device-fan .device--mobile.fan-center { max-width: 320px; }
      .device-fan .device--mobile.fan-side   { max-width: 320px; }
      .device-fan .device--mobile.fan-left {
        transform: translate(-50%, -50%) translateX(-38%) rotate(-9deg) scale(0.86);
      }
      .device-fan .device--mobile.fan-right {
        transform: translate(-50%, -50%) translateX(38%) rotate(9deg) scale(0.86);
      }
    }

    @media (max-width: 768px) {
      .device-fan { padding: 0; }
      .device-fan .device--mobile.fan-side { display: none; }
    }

    .device-set { width: 100%; }
    .device-set__variant { display: none; }
    .device-set__variant--laptop { display: block; }

    @media (max-width: 1024px) {
      .device-set__variant--laptop { display: none; }
      .device-set__variant--tablet { display: block; }
    }
    @media (max-width: 768px) {
      .device-set__variant--tablet { display: none; }
      .device-set__variant--mobile { display: block; }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 32px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-decoration: none;
      cursor: pointer;
      border: none;
      font-family: inherit;
      border-radius: 12px;
      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .btn svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s;
      position: relative;
      z-index: 1;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      color: var(--white);
      box-shadow: 0 4px 20px rgba(0, 156, 111, 0.3);
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .btn-primary > span {
      position: relative;
      z-index: 1;
    }
    @media (hover: hover) {
      .btn-primary:hover::before { opacity: 1; }
      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 40px rgba(0, 156, 111, 0.4);
      }
      .btn-primary:hover svg { transform: translateX(4px); }
    }

    .btn-secondary {
      background: transparent;
      color: var(--cream);
      border: 1px solid var(--border-bright);
    }
    .btn-secondary svg {
      color: var(--accent-bright);
    }
    @media (hover: hover) {
      .btn-secondary:hover {
        border-color: var(--cream);
        transform: translateY(-3px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      }
      .btn-secondary:hover svg { transform: translateX(4px); }
    }

    .sp-cta {
      margin-top: clamp(48px, 6vw, 72px);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 14px;
    }
    @media (max-width: 480px) {
      .sp-cta { flex-direction: column; align-items: stretch; }
      .sp-cta .btn { width: 100%; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .cs-image { min-height: 710px; }
      .cs-image-content { padding: 150px 40px 80px; }
      .cs-title { font-size: clamp(36px, 5.2vw, 56px); }

      .cs-image-glow {
        background:
          radial-gradient(
            ellipse 65% 88% at 50% 100% in oklch,
            rgb(var(--glow-tint) / 0.6) 0%,
            rgb(var(--glow-tint) / 0.45) 35%,
            rgb(var(--glow-tint) / 0.22) 65%,
            rgb(var(--glow-tint) / 0.06) 88%,
            rgb(var(--glow-tint) / 0) 100%
          ),
          linear-gradient(
            to right in oklch,
            rgb(var(--glow-tint) / 0) 0%,
            rgb(var(--glow-tint) / 0.1) 9%,
            rgb(var(--glow-tint) / 0.32) 19%,
            rgb(var(--glow-tint) / 0.6) 30%,
            rgb(var(--glow-tint) / 0.82) 42%,
            rgb(var(--glow-tint) / 0.86) 50%,
            rgb(var(--glow-tint) / 0.82) 58%,
            rgb(var(--glow-tint) / 0.6) 70%,
            rgb(var(--glow-tint) / 0.32) 81%,
            rgb(var(--glow-tint) / 0.1) 91%,
            rgb(var(--glow-tint) / 0) 100%
          );
      }
    }

    @media (max-width: 768px) {
      .cs-image { min-height: 608px; }

      .cs-image-content {
        padding: 116px 20px 64px;
      }

      .cs-image-glow {
        background:
          radial-gradient(
            ellipse 75% 85% at 50% 100% in oklch,
            rgb(var(--glow-tint) / 0.62) 0%,
            rgb(var(--glow-tint) / 0.48) 38%,
            rgb(var(--glow-tint) / 0.22) 68%,
            rgb(var(--glow-tint) / 0.06) 88%,
            rgb(var(--glow-tint) / 0) 100%
          ),
          linear-gradient(
            to right in oklch,
            rgb(var(--glow-tint) / 0) 0%,
            rgb(var(--glow-tint) / 0.15) 8%,
            rgb(var(--glow-tint) / 0.42) 18%,
            rgb(var(--glow-tint) / 0.7) 30%,
            rgb(var(--glow-tint) / 0.88) 42%,
            rgb(var(--glow-tint) / 0.92) 50%,
            rgb(var(--glow-tint) / 0.88) 58%,
            rgb(var(--glow-tint) / 0.7) 70%,
            rgb(var(--glow-tint) / 0.42) 82%,
            rgb(var(--glow-tint) / 0.15) 92%,
            rgb(var(--glow-tint) / 0) 100%
          );
      }

      .cs-num { font-size: 10px; margin-bottom: 22px; letter-spacing: 0.24em; }

      .cs-pills { gap: 6px; margin-bottom: 26px; }
      .cs-pill { font-size: 10px; padding: 6px 11px; letter-spacing: 0.12em; }

      .cs-title {
        font-size: clamp(30px, 8vw, 44px);
        margin-bottom: 22px;
      }

      .cs-copy { font-size: 16px; line-height: 1.55; }

      .cs-preview { padding: 0 0 64px; }
      .cs-preview-frame { border-radius: 10px; }
    }

    .cs-preview-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(280px, 38vw, 520px);
      border: 1px dashed rgba(241, 237, 228, 0.18);
      border-radius: 16px;
      background:
        repeating-linear-gradient(
          135deg,
          rgba(241, 237, 228, 0.02) 0,
          rgba(241, 237, 228, 0.02) 12px,
          transparent 12px,
          transparent 24px
        ),
        rgba(241, 237, 228, 0.015);
      text-align: center;
      padding: 40px;
    }
    .cs-preview-placeholder span {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--cream-muted);
      max-width: 36ch;
      text-wrap: balance;
    }

    .svc {
      position: relative;
      background: var(--cream);
      padding: clamp(80px, 11vw, 132px) 0;
      border-top: 1px solid var(--black);
      border-bottom: 1px solid var(--black);
      overflow: hidden;
    }
    .svc::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 156, 111, 0.05) 0%, transparent 60%);
      pointer-events: none;
    }
    .svc .container { position: relative; z-index: 1; }

    .svc-header {
      max-width: 720px;
      margin: 0 auto clamp(48px, 6vw, 72px);
      text-align: center;
    }
    .svc-eyebrow {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 18px;
    }
    .svc-title {
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.022em;
      color: var(--black);
      text-wrap: balance;
      margin: 0 0 18px;
    }
    .svc-sub {
      font-size: clamp(15px, 1.3vw, 18px);
      line-height: 1.55;
      color: rgba(23, 22, 23, 0.72);
      text-wrap: balance;
      max-width: 580px;
      margin: 0 auto;
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 1.8vw, 24px);
    }

    .svc-card {
      position: relative;
      padding: 30px 26px 28px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(23, 22, 23, 0.12);
      border-radius: 16px;
      transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    @media (hover: hover) {
      .svc-card:hover {
        border-color: rgba(0, 156, 111, 0.4);
        background: rgba(255, 255, 255, 0.85);
        transform: translateY(-2px);
        box-shadow: 0 14px 32px -16px rgba(23, 22, 23, 0.22);
      }
      .svc-card:hover .svc-card-icon {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--cream);
      }
    }

    .svc-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--black);
      border: 1px solid var(--black);
      color: var(--cream);
      margin-bottom: 22px;
      transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .svc-card-icon svg {
      width: 22px;
      height: 22px;
    }

    .svc-card-title {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.012em;
      color: var(--black);
      margin: 0 0 10px;
    }

    .svc-card-text {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(23, 22, 23, 0.72);
      margin: 0;
      text-wrap: pretty;
    }

    @media (max-width: 1180px) {
      .svc-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 860px) {
      .svc-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .svc-grid { grid-template-columns: 1fr; gap: 12px; }
      .svc-card { padding: 24px 22px 22px; }
    }

    .section-cta {
      display: flex;
      justify-content: center;
      margin-top: clamp(40px, 5vw, 64px);
    }
    @media (max-width: 480px) {
      .section-cta .btn { width: 100%; }
    }

    .faq {
      position: relative;
      background: var(--black);
      padding: clamp(80px, 11vw, 132px) 0;
      border-top: 1px solid var(--border-dark);
    }
    .faq-header {
      max-width: 720px;
      margin: 0 auto clamp(40px, 5vw, 64px);
      text-align: center;
    }
    .faq-eyebrow {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-bottom: 18px;
    }
    .faq-title {
      font-size: clamp(28px, 3.6vw, 44px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.022em;
      color: var(--cream);
      text-wrap: balance;
      margin: 0;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px 24px;
      align-items: start;
    }

    .faq-item {
      border: 1px solid var(--border-dark);
      border-radius: 14px;
      background: var(--black-light);
      overflow: hidden;
      transition: border-color 0.3s ease;
      scroll-margin-top: 100px;
    }
    .faq-item[data-open="true"] { border-color: rgba(0, 156, 111, 0.35); }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      background: transparent;
      border: 0;
      text-align: left;
      cursor: pointer;
      color: var(--cream);
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.01em;
      min-height: 44px;
    }
    .faq-icon {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      color: var(--accent-bright);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .faq-icon svg { width: 18px; height: 18px; }
    .faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .faq-a p {
      margin: 0;
      padding: 0 24px 24px;
      font-size: 15px;
      line-height: 1.6;
      color: var(--cream-dim);
      text-wrap: pretty;
    }
    .faq-a a {
      color: var(--accent-bright);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (hover: hover) {
      .faq-q:hover .faq-icon { color: var(--cream); }
    }

    @media (max-width: 768px) {
      .faq-grid { grid-template-columns: 1fr; gap: 12px; }
      .faq-q { padding: 18px 18px; font-size: 15px; }
      .faq-a p { padding: 0 18px 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-a { transition: none; }
      .faq-icon { transition: none; }
    }

    .mid {
      background: var(--black);
      padding: clamp(80px, 10vw, 120px) 0;
      border-top: 1px solid var(--border-dark);
    }
    .mid-header {
      position: static;
      max-width: 640px;
      margin: 0 0 clamp(40px, 5vw, 64px);
    }
    .mid-eyebrow {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-bottom: 16px;
    }
    .mid-section-title {
      font-size: clamp(28px, 3.6vw, 44px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--cream);
      text-wrap: balance;
      margin: 0 0 14px;
    }
    .mid-section-sub {
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.55;
      color: var(--cream-dim);
      text-wrap: balance;
      margin: 0;
    }
    .mid-carousel { position: relative; }
    .mid-carousel-nav {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: clamp(16px, 2vw, 24px);
    }
    .mid-carousel-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #1e1d1e;
      border: 1px solid rgba(241, 237, 228, 0.14);
      color: #f1ede4;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .mid-carousel-btn svg { width: 20px; height: 20px; }
    @media (hover: hover) {
      .mid-carousel-btn:hover {
        background: #009C6F;
        border-color: #009C6F;
        color: #171617;
      }
    }
    .mid-carousel-viewport {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .mid-carousel-viewport::-webkit-scrollbar { display: none; }
    .mid-carousel-track {
      display: flex;
      gap: clamp(16px, 2vw, 28px);
    }
    .mid-carousel-track .mid-card {
      flex: 0 0 82%;
      scroll-snap-align: center;
    }
    @media (prefers-reduced-motion: reduce) {
      .mid-carousel-viewport { scroll-behavior: auto; }
    }
    .mid-card {
      background: var(--black-light);
      border: 1px solid var(--border-dark);
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .mid-card-preview {
      background: var(--black);
      border-bottom: 1px solid var(--border-dark);
    }
    .mid-card-preview-bar {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-dark);
    }
    .mid-card-preview-dots { display: flex; gap: 7px; }
    .mid-card-preview-dots span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(241, 237, 228, 0.16);
    }
    .mid-card-preview-screen {
      position: relative;
      overflow: hidden;
      min-height: clamp(180px, 22vw, 280px);
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        repeating-linear-gradient(
          135deg,
          rgba(241, 237, 228, 0.02) 0,
          rgba(241, 237, 228, 0.02) 12px,
          transparent 12px,
          transparent 24px
        );
    }
    .mid-card-preview-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--cream-muted);
    }
    .mid-card-body { padding: clamp(24px, 3vw, 36px); }
    .mid-card-eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-bottom: 12px;
    }
    .mid-card-title {
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--cream);
      margin: 0 0 12px;
    }
    .mid-card-desc {
      font-size: 15px;
      line-height: 1.55;
      color: var(--cream-dim);
      margin: 0 0 16px;
      text-wrap: pretty;
    }
    .mid-card-stack {
      font-size: 13px;
      font-weight: 500;
      color: var(--cream-muted);
      letter-spacing: 0.01em;
      margin: 0;
      padding-top: 16px;
      border-top: 1px solid var(--border-dark);
    }
    @media (min-width: 768px) {
      .mid-carousel-track .mid-card { flex-basis: 50%; }
    }

    .sp {
      background: var(--black-light);
      padding: clamp(80px, 10vw, 120px) 0;
      border-top: 1px solid var(--border-dark);
      border-bottom: 1px solid var(--border-dark);
    }

    .sp-header {
      position: static;
      text-align: center;
      margin-bottom: clamp(48px, 6vw, 72px);
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    .sp-eyebrow-section {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-bright);
      margin-bottom: 18px;
    }
    .sp-section-title {
      font-size: clamp(30px, 4.4vw, 44px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-wrap: balance;
      color: var(--cream);
      margin: 0;
    }
    .sp-section-sub {
      margin: 18px 0 0;
      font-size: 15px;
      line-height: 1.55;
      color: var(--cream-dim);
      text-wrap: balance;
    }

    .sp-grid {
      display: grid;
      gap: 24px;
    }
    .sp-grid--three { grid-template-columns: repeat(3, 1fr); }
    .sp-grid--two   { grid-template-columns: repeat(2, 1fr); }

    .sp-card {
      display: flex;
      flex-direction: column;
      background: var(--black-lighter);
      border: 1px solid var(--border-dark);
      border-radius: 14px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 0.3s ease;
    }
    @media (hover: hover) {
      .sp-card:hover {
        border-color: var(--border-bright);
        transform: translateY(-3px);
      }
      .sp-card:hover .sp-title { color: var(--cream); }
      .sp-card:hover .sp-preview-screen::after { opacity: 1; }
    }

    .sp-preview {
      position: relative;
      background: #0a0a0c;
      border-bottom: 1px solid var(--border-dark);
    }
    .sp-preview-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #131315;
      border-bottom: 1px solid rgba(241, 237, 228, 0.04);
    }
    .sp-preview-dots {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }
    .sp-preview-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(241, 237, 228, 0.18);
    }
    .sp-preview-url {
      flex: 1;
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(241, 237, 228, 0.42);
      text-align: center;
      font-weight: 500;
      padding: 0 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sp-preview-screen {
      aspect-ratio: 16 / 10;
      position: relative;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(0, 156, 111, 0.05) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0c 0%, #050507 100%);
      overflow: hidden;
    }
    .sp-preview-screen::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center, rgba(0, 156, 111, 0.08) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sp-preview-label {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      pointer-events: none;
      z-index: 2;
    }
    .sp-preview-label span:first-child {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: rgba(241, 237, 228, 0.42);
    }
    .sp-preview-label span:last-child {
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(241, 237, 228, 0.24);
    }

    .sp-card-body {
      padding: 22px 24px 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .sp-eyebrow {
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-bright);
      margin-bottom: 10px;
    }
    .sp-title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      color: var(--cream);
      margin: 0 0 8px;
      transition: color 0.3s ease;
    }
    .sp-desc {
      font-size: 13px;
      line-height: 1.55;
      color: var(--cream-dim);
      margin: 0;
    }

    .sp-card--lg .sp-card-body { padding: 30px 32px 32px; }
    .sp-card--lg .sp-title     { font-size: 22px; }
    .sp-card--lg .sp-desc      { font-size: 14px; line-height: 1.6; }

    @media (max-width: 1024px) {
      .sp-grid--three { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .sp-grid--three,
      .sp-grid--two   { grid-template-columns: 1fr; gap: 20px; }
      .sp-card-body      { padding: 20px; }
      .sp-card--lg .sp-card-body { padding: 22px; }
      .sp-preview-bar { padding: 8px 12px; }
      .sp-preview-url { font-size: 9px; }
    }

    .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:100px 20px 80px;overflow:hidden}
    .hero::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:4;mask-image:radial-gradient(ellipse at center,transparent 20%,black 60%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 20%,black 60%)}
    .hero-canvas-container{position:absolute;inset:0;z-index:1;overflow:hidden;background:radial-gradient(ellipse 80% 80% at 50% 40%, rgba(0,156,111,0.06) 0%, transparent 60%), var(--black)}
    #heroCanvas{width:100%;height:100%;display:block}
    .hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;width:1400px;height:1000px;background:radial-gradient(ellipse at center,rgba(0,156,111,.15) 0,rgba(0,156,111,.08) 20%,rgba(0,156,111,.03) 40%,transparent 60%);z-index:2;overflow:hidden}
    .hero-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;width:1600px;height:1100px;background:radial-gradient(ellipse at center,rgba(23,22,23,.9) 0,rgba(23,22,23,.7) 30%,rgba(23,22,23,.3) 55%,transparent 75%);z-index:3}
    .hero-content{position:relative;z-index:10;text-align:center;max-width:860px;padding:48px 56px;background:rgba(23,22,23,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(241,237,228,.08);border-radius:28px;box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 80px rgba(0,156,111,.1),0 0 0 1px rgba(255,255,255,.02) inset}
    .hero-content::before{content:'';position:absolute;inset:0;border-radius:28px;padding:1px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 60% 1px at 50% 0,rgba(0,156,111,.7) 0,transparent 100%),radial-gradient(ellipse 60% 1px at 50% 100%,rgba(0,156,111,.7) 0,transparent 100%),radial-gradient(ellipse 1px 60% at 0 50%,rgba(0,156,111,.7) 0,transparent 100%),radial-gradient(ellipse 1px 60% at 100% 50%,rgba(0,156,111,.7) 0,transparent 100%),rgba(241,237,228,.06);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
    .hero-label{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(0,156,111,.18) 0,rgba(0,156,111,.06) 100%);border:1px solid rgba(0,156,111,.35);border-radius:100px;padding:8px 20px;margin-bottom:24px;font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.02em;box-shadow:0 0 40px rgba(0,156,111,.12);position:relative;overflow:hidden}
    .hero-label-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite;box-shadow:0 0 8px var(--accent)}
    .hero-label::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.1) 50%,transparent 100%);animation:shine 4s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
    @keyframes shine{0%{left:-100%}50%,100%{left:100%}}
    .hero h1{font-size:clamp(30px,5vw,54px);font-weight:800;line-height:1.1;margin-bottom:28px;letter-spacing:-.025em;color:var(--cream);text-wrap:balance;max-width:18ch;margin-left:auto;margin-right:auto}
    .hero h1 .highlight{background:linear-gradient(180deg,var(--accent-bright) 0,var(--accent-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-subheader{font-size:clamp(16px,2.5vw,20px);font-weight:400;color:var(--cream-dim);letter-spacing:.02em;margin-bottom:32px;max-width:42ch;margin-left:auto;margin-right:auto;text-wrap:balance}
    .hero-marquee-container{width:100%;max-width:700px;margin:0 auto 24px;padding:16px 0;background:rgba(241,237,228,.02);border:1px solid rgba(241,237,228,.06);border-radius:16px;position:relative;overflow:hidden}
    .hero-marquee-container::before,.hero-marquee-container::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
    .hero-marquee-container::before{left:0;background:linear-gradient(to right,var(--black) 0,transparent 100%)}
    .hero-marquee-container::after{right:0;background:linear-gradient(to left,var(--black) 0,transparent 100%)}
    .hero-marquee-row{display:flex;white-space:nowrap;overflow:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}
    .hero-marquee-row+.hero-marquee-row{margin-top:10px}
    .hero-marquee-track{display:flex;animation:marqueeScroll 35s linear infinite}
    .hero-marquee-row-2 .hero-marquee-track{animation:marqueeScrollReverse 45s linear infinite both}
    @keyframes marqueeScroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
    @keyframes marqueeScrollReverse{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}
    .hero-marquee-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;margin-right:10px;background:rgba(241,237,228,.04);border:1px solid rgba(241,237,228,.08);border-radius:8px;font-size:13px;font-weight:500;color:var(--cream-dim);white-space:nowrap;flex-shrink:0}
    .hero-marquee-pill svg{width:14px;height:14px;flex-shrink:0;color:var(--accent)}
    .hero-marquee-pill.secondary{background:rgba(0,156,111,.08);border-color:rgba(0,156,111,.15);color:var(--accent);font-weight:400;font-size:12px}
    .hero-marquee-pill.secondary svg{width:12px;height:12px;opacity:.8}
    .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream-muted);text-decoration:none;z-index:5;transition:color .3s}
    .scroll-indicator:hover{color:var(--accent)}
    .scroll-indicator span{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
    .scroll-indicator-icon{width:24px;height:38px;border:2px solid currentColor;border-radius:12px;display:flex;justify-content:center;padding-top:6px;opacity:.6}
    .scroll-indicator-dot{width:4px;height:4px;background:currentColor;border-radius:50%;animation:1.8s ease-in-out infinite scrollBounce}
    @keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(12px);opacity:.3}}
    @media (max-width:768px){
      .hero{padding:110px 16px 90px}
      .hero-content{padding:0 4px;background:0 0;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-radius:0;box-shadow:none;max-width:100%}
      .hero-content::before{display:none}
      .hero-glow{width:200%;height:150%}
      .hero-label{padding:7px 14px;gap:8px;font-size:11px}
      .hero h1{font-size:clamp(26px,7.5vw,38px);margin-bottom:20px}
      .hero-subheader{font-size:14px;margin-bottom:24px}
      .hero-marquee-container{max-width:calc(100% - 32px);margin:0 16px 20px;padding:12px 0;border-radius:12px}
      .hero-marquee-container::before,.hero-marquee-container::after{width:20px}
      .hero-marquee-pill{padding:6px 12px;font-size:12px;gap:6px;margin-right:8px}
      .hero-marquee-pill svg{width:12px;height:12px}
      .hero-marquee-pill.secondary svg{width:10px;height:10px}
      .hero-marquee-pill.secondary{font-size:11px}
      .scroll-indicator{bottom:20px}
    }

    .closer {
      position: relative;
      background: var(--black);
      padding: clamp(90px, 14vh, 160px) 0;
      overflow: hidden;
      border-top: 1px solid var(--border-dark);
      text-align: center;
    }
    .closer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0, 156, 111, 0.14) 0%, transparent 62%);
      pointer-events: none;
    }
    .closer .container { position: relative; z-index: 1; }
    .closer-eyebrow {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-bottom: 24px;
    }
    .closer-title {
      font-size: clamp(34px, 5vw, 64px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.022em;
      color: var(--cream);
      text-wrap: balance;
      max-width: 18ch;
      margin: 0 auto 22px;
    }
    .closer-title .accent { color: var(--accent-bright); }
    .closer-lead {
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.55;
      color: var(--cream-dim);
      text-wrap: balance;
      max-width: 560px;
      margin: 0 auto 40px;
    }
    .closer-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 480px) {
      .closer-cta { flex-direction: column; align-items: stretch; }
      .closer-cta .btn { width: 100%; justify-content: center; }
    }

    .section-divider {
      position: relative;
      height: 3px;
      background: var(--black);
      overflow: hidden;
    }
    .section-divider::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 156, 111, 0.25) 25%,
        rgba(0, 156, 111, 0.5) 50%,
        rgba(0, 156, 111, 0.25) 75%,
        transparent 100%
      );
    }
    .section-divider-pulse {
      position: absolute;
      top: 0;
      left: -30%;
      width: 30%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-bright) 50%,
        transparent 100%
      );
      box-shadow: 0 0 14px 2px rgba(0, 179, 127, 0.6);
      animation: divider-sweep 3.4s ease-in-out infinite;
    }
    @keyframes divider-sweep {
      0% { left: -30%; }
      100% { left: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .section-divider-pulse { animation: none; opacity: 0.5; left: 35%; }
    }

    .opener {
      position: relative;
      background: var(--black) url('/private/random/home/assets/office.png') right center / cover no-repeat;
      background-attachment: scroll;
      padding: clamp(48px, 6vw, 88px) 0 0;
      overflow: hidden;
      box-shadow: inset 0 -4px 0 0 var(--black);
    }
    .opener::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: -2px;
      background:
        linear-gradient(
          to right,
          rgba(13, 13, 14, 0.94) 0%,
          rgba(13, 13, 14, 0.86) 22%,
          rgba(13, 13, 14, 0.55) 42%,
          rgba(13, 13, 14, 0.18) 62%,
          rgba(13, 13, 14, 0) 80%
        ),
        linear-gradient(
          to bottom,
          rgba(13, 13, 14, 0.28) 0%,
          rgba(13, 13, 14, 0) 22%,
          rgba(13, 13, 14, 0) 68%,
          rgba(13, 13, 14, 0.55) 94%,
          rgba(13, 13, 14, 1) 99%,
          rgba(13, 13, 14, 1) 100%
        );
      pointer-events: none;
      z-index: 0;
    }
    .opener .container { position: relative; z-index: 1; }

    .opener-layout {
      display: grid;
      grid-template-columns: 0.9fr 1fr;
      gap: clamp(32px, 4vw, 60px);
      align-items: stretch;
      min-height: clamp(700px, 80vh, 940px);
    }

    .opener-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      padding-bottom: clamp(40px, 6vw, 64px);
    }
    .opener-eyebrow {
      display: inline-block;
      align-self: flex-start;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-bright);
      margin-bottom: 24px;
    }
    .opener-title {
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.05;
      text-wrap: balance;
      color: var(--cream);
      margin: 0 0 24px;
    }
    .opener-lead {
      font-size: clamp(16px, 1.25vw, 18px);
      line-height: 1.55;
      color: var(--cream-dim);
      text-wrap: balance;
      max-width: 600px;
      margin: 0 0 32px;
    }

    .opener-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: flex-start;
    }
    @media (max-width: 480px) {
      .opener-cta { flex-direction: column; align-items: stretch; }
      .opener-cta .btn { width: 100%; justify-content: center; }
    }

    .opener-portrait {
      position: relative;
      width: 100%;
      align-self: end;
      max-width: clamp(520px, 58vw, 820px);
      justify-self: end;
      aspect-ratio: 4 / 5;
    }
    .opener-portrait-img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
    }
    .opener-portrait-img:not([src]),
    .opener-portrait-img[src=""] {
      background:
        linear-gradient(135deg, rgba(241, 237, 228, 0.04) 0%, rgba(241, 237, 228, 0.01) 100%);
      border: 1px dashed rgba(241, 237, 228, 0.12);
      border-radius: 12px;
    }

    .opener-pillbox {
      position: absolute;
      bottom: 14%;
      left: -10%;
      z-index: 3;
      max-width: 260px;
      padding: 14px 18px;
      background: rgba(13, 13, 14, 0.82);
      backdrop-filter: blur(18px) saturate(1.3);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      border: 1px solid rgba(241, 237, 228, 0.12);
      border-radius: 16px;
      box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 156, 111, 0.10),
        inset 0 1px 0 rgba(241, 237, 228, 0.06);
      animation: pillbox-bob 4.5s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes pillbox-bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .opener-pillbox { animation: none; }
    }
    .opener-pillbox-header {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px 10px;
      margin-bottom: 8px;
    }
    .opener-pillbox-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--cream);
      letter-spacing: -0.01em;
    }
    .opener-pillbox-role {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-bright);
    }
    .opener-pillbox-bio {
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--cream-dim);
      margin: 0;
      text-wrap: balance;
    }

    @media (max-width: 1024px) {
      .opener {
        background-position: 75% center;
        padding-top: clamp(56px, 9vw, 88px);
      }
      .opener::before {
        bottom: -2px;
        background:
          radial-gradient(
            ellipse 120% 75% at 15% 18%,
            rgba(13, 13, 14, 0.96) 0%,
            rgba(13, 13, 14, 0.88) 32%,
            rgba(13, 13, 14, 0.55) 58%,
            rgba(13, 13, 14, 0.2) 78%,
            rgba(13, 13, 14, 0) 100%
          ),
          linear-gradient(
            to bottom,
            rgba(13, 13, 14, 0.8) 0%,
            rgba(13, 13, 14, 0.5) 38%,
            rgba(13, 13, 14, 0.35) 62%,
            rgba(13, 13, 14, 0.6) 88%,
            rgba(13, 13, 14, 1) 97%,
            rgba(13, 13, 14, 1) 100%
          );
      }
      .opener-layout {
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vw, 48px);
        min-height: 0;
      }
      .opener-inner {
        padding-top: clamp(8px, 3vw, 24px);
        padding-bottom: clamp(24px, 5vw, 40px);
      }
      .opener-portrait {
        max-width: 560px;
        justify-self: center;
        align-self: center;
      }
      .opener-pillbox {
        left: -4%;
        bottom: 10%;
      }
    }
    @media (max-width: 768px) {
      .opener {
        padding-top: clamp(48px, 11vw, 72px);
        background-image: url('/assets/images/office-background.webp');
        background-position: center;
      }
      .opener::before {
        background: none;
      }
      .opener-inner {
        padding-top: clamp(4px, 4vw, 20px);
        padding-bottom: clamp(20px, 6vw, 36px);
      }
      .opener-portrait { max-width: 460px; }
      .opener-pillbox {
        max-width: 220px;
        left: -2%;
        padding: 12px 14px;
      }
      .opener-pillbox-name { font-size: 14px; }
      .opener-pillbox-bio { font-size: 12px; }
    }
    @media (max-width: 480px) {
      .opener-portrait { max-width: 380px; }
      .opener-pillbox {
        max-width: 200px;
        left: 0;
        bottom: 6%;
      }
    }

    .logos {
      background: var(--black-light);
      padding: clamp(56px, 7vw, 88px) 0;
      border-bottom: 1px solid var(--border-dark);
    }
    .logos-eyebrow {
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--cream-muted);
      margin: 0 0 36px;
    }
    .logos-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
    }
    .logo-box {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px 20px;
      min-height: 96px;
      background: rgba(241, 237, 228, 0.02);
      border: 1px solid var(--border-dark);
      border-radius: 14px;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .logo-box img {
      max-width: 100%;
      max-height: 44px;
      width: auto;
      height: auto;
      object-fit: contain;
      opacity: 0.62;
      filter: brightness(0) invert(1);
      transition: opacity 0.3s ease;
    }
    @media (hover: hover) {
      .logo-box:hover {
        border-color: rgba(0, 156, 111, 0.4);
        background: rgba(0, 156, 111, 0.04);
      }
      .logo-box:hover img { opacity: 1; }
    }

    @media (min-width: 1025px) and (hover: hover) {
      @keyframes logo-pop {
        0%, 100%   { transform: scale(1);    opacity: 0.62; }
        2%, 4%     { transform: scale(1.18); opacity: 1;    }
      }
      .logos-grid .logo-box img {
        animation: logo-pop 22s ease-in-out infinite;
        will-change: transform;
      }
      .logos-grid .logo-box:nth-child(1)  img { animation-delay:   0s;    }
      .logos-grid .logo-box:nth-child(11) img { animation-delay: -20.78s; }
      .logos-grid .logo-box:nth-child(4)  img { animation-delay: -19.56s; }
      .logos-grid .logo-box:nth-child(16) img { animation-delay: -18.33s; }
      .logos-grid .logo-box:nth-child(7)  img { animation-delay: -17.11s; }
      .logos-grid .logo-box:nth-child(13) img { animation-delay: -15.89s; }
      .logos-grid .logo-box:nth-child(2)  img { animation-delay: -14.67s; }
      .logos-grid .logo-box:nth-child(18) img { animation-delay: -13.44s; }
      .logos-grid .logo-box:nth-child(9)  img { animation-delay: -12.22s; }
      .logos-grid .logo-box:nth-child(5)  img { animation-delay: -11s;    }
      .logos-grid .logo-box:nth-child(14) img { animation-delay:  -9.78s; }
      .logos-grid .logo-box:nth-child(8)  img { animation-delay:  -8.56s; }
      .logos-grid .logo-box:nth-child(17) img { animation-delay:  -7.33s; }
      .logos-grid .logo-box:nth-child(3)  img { animation-delay:  -6.11s; }
      .logos-grid .logo-box:nth-child(12) img { animation-delay:  -4.89s; }
      .logos-grid .logo-box:nth-child(6)  img { animation-delay:  -3.67s; }
      .logos-grid .logo-box:nth-child(15) img { animation-delay:  -2.44s; }
      .logos-grid .logo-box:nth-child(10) img { animation-delay:  -1.22s; }
      .logos-grid .logo-box:hover img {
        animation-play-state: paused;
        transform: scale(1.1);
        opacity: 1;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .logos-grid .logo-box img { animation: none !important; }
    }

    .logos-marquee { display: none; }

    @media (min-width: 1025px) {
      .logos-grid { display: grid; }
      .logos-marquee { display: none; }
    }

    @media (max-width: 1024px) {
      .logos-grid { display: none; }
      .logos-marquee {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .logos-marquee-row {
        overflow: hidden;
        position: relative;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
      }
      .logos-marquee-track {
        display: flex;
        gap: 14px;
        width: max-content;
      }
      .logos-marquee-track--ltr { animation: logos-scroll-ltr 38s linear infinite; }
      .logos-marquee-track--rtl { animation: logos-scroll-rtl 38s linear infinite; }
      .logos-marquee .logo-box {
        flex: 0 0 auto;
        width: 168px;
        min-height: 84px;
        padding: 10px 16px;
      }
      .logos-marquee .logo-box img { max-height: 60px; }
    }
    @media (max-width: 640px) {
      .logos-marquee-row {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
      }
      .logos-marquee .logo-box { width: 140px; min-height: 76px; padding: 8px 12px; }
      .logos-marquee .logo-box img { max-height: 54px; }
      .logos-marquee-track--ltr,
      .logos-marquee-track--rtl { animation-duration: 30s; }
    }
    @keyframes logos-scroll-ltr {
      0% { transform: translateX(0); }
      100% { transform: translateX(-33.333%); }
    }
    @keyframes logos-scroll-rtl {
      0% { transform: translateX(-33.333%); }
      100% { transform: translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .logos-marquee-track--ltr,
      .logos-marquee-track--rtl { animation: none; }
      .logos-marquee-row {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
      }
    }

    .pillars {
      padding: var(--section-padding) 0;
    }
    .pillars--how { background: var(--black); }
    .pillars--what {
      background: var(--black-light);
      border-top: 1px solid var(--border-dark);
    }
    .pillars-header {
      max-width: 760px;
      margin: 0 0 clamp(48px, 6vw, 72px);
    }
    .pillars-eyebrow {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-bright);
      margin-bottom: 18px;
    }
    .pillars-title {
      font-size: clamp(30px, 4.4vw, 48px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-wrap: balance;
      color: var(--cream);
      margin: 0;
    }
    .pillars-grid {
      display: grid;
      gap: clamp(16px, 2vw, 24px);
    }
    .pillars-grid--three { grid-template-columns: repeat(3, 1fr); }
    .pillars-grid--two   { grid-template-columns: repeat(2, 1fr); }

    .pillar {
      position: relative;
      background: rgba(241, 237, 228, 0.025);
      border: 1px solid var(--border-dark);
      border-radius: 16px;
      padding: clamp(28px, 3vw, 40px);
      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (hover: hover) {
      .pillar:hover {
        border-color: var(--border-bright);
        transform: translateY(-3px);
      }
    }
    .pillar-num {
      font-size: 12px;
      letter-spacing: 0.22em;
      font-weight: 700;
      color: var(--accent-bright);
      margin-bottom: 22px;
    }
    .pillar-title {
      font-size: clamp(20px, 1.8vw, 24px);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      text-wrap: balance;
      color: var(--cream);
      margin: 0 0 14px;
    }
    .pillar-body {
      font-size: 16px;
      line-height: 1.65;
      color: var(--cream-dim);
      text-wrap: balance;
      margin: 0;
    }

    @media (max-width: 1024px) {
      .pillars-grid--three { grid-template-columns: repeat(2, 1fr); }
      .pillars-grid--three > :nth-child(3) { grid-column: 1 / -1; }
    }

    @media (max-width: 768px) {
      .pillars-grid--three,
      .pillars-grid--two { grid-template-columns: 1fr; }
      .pillars-grid--three > :nth-child(3) { grid-column: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

@font-face {
  font-family: "JetBrains Mono";
  src: url('/assets/fonts/JetBrainsMono-VariableFont.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

.sw-root {
  background: var(--black);
  padding: clamp(80px, 11vw, 132px) var(--container-padding);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.sw-inner { max-width: 1240px; margin: 0 auto; color: var(--cream); }

.sw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sw-head-text { max-width: 720px; }
.sw-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sw-h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 14px 0 0; color: var(--cream); text-wrap: balance; }
.sw-sub { font-size: 18px; line-height: 1.6; color: rgba(241, 237, 228, 0.7); margin: 14px 0 0; text-wrap: pretty; }
.sw-scroll { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(241, 237, 228, 0.45); white-space: nowrap; padding-bottom: 6px; }
.sw-scroll svg { width: 14px; height: 14px; }

.sw-rail { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }

.sw-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; }
.sw-nav-progress { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.sw-nav-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--cream); white-space: nowrap; }
.sw-nav-count em { font-style: normal; color: rgba(241, 237, 228, 0.35); padding: 0 5px; }
.sw-nav-count [data-sw-total] { color: rgba(241, 237, 228, 0.45); }
.sw-nav-track { position: relative; flex: 1; max-width: 260px; height: 2px; border-radius: 999px; background: rgba(241, 237, 228, 0.14); overflow: hidden; }
.sw-nav-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.25s ease; }
.sw-nav-btns { display: flex; gap: 10px; }
.sw-nav-btn {
  appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  background: none; border: 1px solid rgba(241, 237, 228, 0.22); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.sw-nav-btn svg { width: 19px; height: 19px; }
.sw-nav-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .sw-nav-btn:not(:disabled):hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (max-width: 560px) {
  .sw-nav { margin-top: 18px; }
  .sw-nav-track { max-width: none; }
}

.sw-card {
  position: relative; flex: 0 0 372px; height: 580px; scroll-snap-align: start;
  overflow: hidden; border-radius: 18px; background: var(--black-light);
  border: 1px solid rgba(241, 237, 228, 0.12); text-decoration: none; display: block;
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.sw-card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.sw-card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30, 29, 30, 0.82) 0%, rgba(30, 29, 30, 0.55) 52%, rgba(30, 29, 30, 0.3) 100%);
}
.sw-card-body { position: relative; z-index: 2; padding: 38px 38px 0; }
.sw-eyebrow { position: relative; height: 13px; }
.sw-eyebrow span { position: absolute; inset: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; transition: opacity 0.28s ease; }
.sw-eyebrow-sector { color: rgba(241, 237, 228, 0.5); opacity: 1; }
.sw-eyebrow-type { color: var(--accent); opacity: 0; }
.sw-name { font-size: 28px; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--cream); margin-top: 10px; text-wrap: balance; }
.sw-tagline { font-size: 14.5px; line-height: 1.55; color: rgba(241, 237, 228, 0.58); margin: 13px 0 0; max-width: 34ch; text-wrap: pretty; }
.sw-view { display: flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--accent); transition: gap 0.2s ease; }
.sw-view svg { width: 15px; height: 15px; }

.sw-phone {
  position: absolute; bottom: -296px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 314px; background: #e7e2d6; border-radius: 36px; padding: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px #d8d2c4;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-phone-screen { position: relative; width: 100%; aspect-ratio: 780 / 1578; border-radius: 26px; overflow: hidden; background: #111 center / cover no-repeat; }

@media (hover: hover) {
  .sw-card:hover { border-color: rgba(241, 237, 228, 0.28); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55); }
  .sw-card:hover .sw-phone { transform: translateX(-50%) translateY(-20px); }
  .sw-card:hover .sw-view { gap: 11px; }
  .sw-card:hover .sw-eyebrow-sector { opacity: 0; }
  .sw-card:hover .sw-eyebrow-type { opacity: 1; }
}
@media (hover: none) {
  .sw-phone { transform: translateX(-50%) translateY(-20px); }
}

.sw-cta { margin-top: 44px; padding-top: 34px; border-top: 1px solid #29282a; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sw-cta-text { max-width: 52ch; }
.sw-cta-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sw-cta-line { font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--cream); margin-top: 10px; text-wrap: balance; }
.sw-cta-btn { flex: none; }

@media (max-width: 900px) {
  .sw-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sw-card { flex: 0 0 44vw; }
}
@media (max-width: 560px) {
  .sw-h2 { font-size: 33px; }
  .sw-sub { font-size: 15px; }
  .sw-card { flex: 0 0 84vw; height: 548px; }
  .sw-card-body { padding: 28px 24px 0; }
  .sw-phone { width: 74vw; }
  .sw-cta { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-card, .sw-phone, .sw-view, .sw-eyebrow span, .sw-nav-fill, .sw-nav-btn { transition: none; }
}

.method {
  --ink-dim: rgba(23, 22, 23, 0.66);
  --ink-muted: rgba(23, 22, 23, 0.45);
  --ink-line: rgba(23, 22, 23, 0.14);
  --ink-line-soft: rgba(23, 22, 23, 0.08);
  position: relative;
  background: var(--cream);
  color: var(--black);
  padding: clamp(80px, 11vw, 132px) 0;
}

.method-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.method-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.method-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--black);
  text-wrap: balance;
  margin: 0 0 18px;
}
.method-title-accent { color: var(--accent); }
.method-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 56ch;
  text-wrap: balance;
  margin: 0;
}
.method-stat {
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 2.5vw, 32px);
}
.method-stat-figure {
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--black);
}
.method-stat-caption {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 14px 0 0;
  max-width: 32ch;
  text-wrap: balance;
}
.method-stat-source {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 12px 0 0;
}

.method-rail {
  margin-bottom: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: stretch;
}
.method-rail-panel {
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
}
.method-rail-panel.them {
  background: transparent;
  border: 1px dashed var(--ink-line);
}
.method-rail-panel.us {
  background: var(--black);
  border: 1px solid var(--black);
}
.method-rail-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.method-rail-panel.them .method-rail-head { color: var(--ink-muted); }
.method-rail-panel.us .method-rail-head { color: var(--accent-bright); }
.method-rail-line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line-soft);
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.45;
}
.method-rail-line:last-child { border-bottom: none; }
.method-rail-panel.them .method-rail-line {
  color: rgba(23, 22, 23, 0.78);
  font-weight: 500;
}
.method-rail-panel.us .method-rail-line {
  color: var(--cream);
  font-weight: 600;
  border-bottom-color: var(--cream-subtle);
}
.method-rail-line .mk { flex-shrink: 0; display: flex; }
.method-rail-panel.them .method-rail-line .mk { color: var(--market-red); }
.method-rail-panel.us .method-rail-line .mk { color: var(--accent-bright); }
.method-rail-line .mk svg { width: 18px; height: 18px; }

.method-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.method-principle {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(23, 22, 23, 0.12);
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 32px);
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .method-principle:hover {
    border-color: rgba(0, 156, 111, 0.4);
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -16px rgba(23, 22, 23, 0.22);
  }
  .method-principle:hover .method-principle-icon { background: var(--accent); }
}
.method-principle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--black);
  color: var(--cream);
  margin-bottom: 20px;
  transition: background 0.3s ease;
}
.method-principle-icon svg { width: 24px; height: 24px; }
.method-principle-title {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--black);
  text-wrap: balance;
  margin: 0 0 10px;
}
.method-principle-text {
  font-size: clamp(15px, 1.15vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0;
}

.method-cta {
  background: var(--black);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.method-cta-title {
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 8px;
}
.method-cta-sub {
  font-size: clamp(15px, 1.15vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 52ch;
  text-wrap: balance;
  margin: 0;
}
.method-cta .btn { white-space: nowrap; }

.method .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.method .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .method .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
  .method-principles { gap: 24px; }
}

@media (max-width: 900px) {
  .method-header {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  .method-stat {
    border-left: none;
    border-top: 2px solid var(--accent);
    padding-left: 0;
    padding-top: 20px;
    max-width: 420px;
  }
  .method-rail { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .method { padding: 56px 0; }
  .method-principles {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .method-rail-panel { padding: 24px 22px; }
  .method-cta { flex-direction: column; align-items: flex-start; }
  .method-cta .btn { width: 100%; }
}

@media (max-width: 375px) {
  .method { padding: 48px 0; }
  .method-stat-figure { font-size: 46px; }
}

.focus {
  position: relative;
  background: var(--black);
  color: var(--cream);
  padding: clamp(80px, 11vw, 132px) 0;
}

.focus-header {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 88px);
}
.focus-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.focus-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 18px;
}
.focus-title-accent { color: var(--accent); }
.focus-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--cream-dim);
  max-width: 58ch;
  text-wrap: balance;
  margin: 0;
}
.focus-proof {
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 2.5vw, 30px);
}
.focus-proof-figure {
  font-size: clamp(48px, 6.5vw, 80px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.focus-proof-caption {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 14px 0 0;
  max-width: 34ch;
  text-wrap: balance;
}
.focus-proof-source {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin: 12px 0 0;
}

.focus-lead-pillar {
  position: relative;
  background: var(--black-light);
  border: 1px solid var(--border-dark);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 52px);
  margin-bottom: clamp(16px, 2vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  overflow: hidden;
}
.focus-lead-pillar::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -8%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
  pointer-events: none;
}
.focus-lead-pillar > * { position: relative; z-index: 1; }
.focus-lead-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.focus-lead-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.focus-lead-icon { display: flex; color: var(--accent); }
.focus-lead-icon svg { width: 30px; height: 30px; }
.focus-lead-heading {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 14px;
}
.focus-lead-copy {
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 46ch;
  margin: 0;
}
.focus-counter {
  border-left: 1px solid var(--border-dark);
  padding-left: clamp(24px, 3vw, 40px);
}
.focus-counter-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-subtle);
}
.focus-counter-row:last-child { border-bottom: none; }
.focus-counter-stat {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-bright);
  flex-shrink: 0;
  min-width: 3.4ch;
}
.focus-counter-label {
  font-size: clamp(13px, 1.05vw, 14px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--cream-muted);
  text-wrap: balance;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.focus-card {
  background: var(--black-light);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
  .focus-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
  }
}
.focus-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.focus-card-icon { display: flex; color: var(--accent); }
.focus-card-icon svg { width: 24px; height: 24px; }
.focus-card-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
}
.focus-card-title {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 10px;
}
.focus-card-text {
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream-dim);
  margin: 0;
}
.focus-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(0, 156, 111, 0.35);
  border-radius: 100px;
  padding: 6px 13px;
}

.focus .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.focus .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .focus .reveal { opacity: 1; transform: none; transition: none; }
  .focus-card { transition: none; }
}

@media (max-width: 1024px) {
  .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .focus-header {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  .focus-proof {
    border-left: none;
    border-top: 2px solid var(--accent);
    padding-left: 0;
    padding-top: 20px;
    max-width: 440px;
  }
  .focus-lead-pillar {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .focus-counter {
    border-left: none;
    border-top: 1px solid var(--border-dark);
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  .focus { padding: 56px 0; }
  .focus-grid { grid-template-columns: 1fr; }
  .focus-lead-pillar { padding: 24px; }
}

@media (max-width: 375px) {
  .focus { padding: 48px 0; }
  .focus-proof-figure { font-size: 44px; }
  .focus-lead-pillar { padding: 20px; }
  .focus-counter-row { gap: 10px; }
  .focus-counter-stat { font-size: 24px; }
}

@media (max-width: 320px) {
  .focus-card { padding: 18px; }
}

.inds {
  position: relative;
  background: var(--cream);
  color: var(--black);
  padding: clamp(80px, 11vw, 132px) 0;
}

.inds-header {
  max-width: 720px;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.inds-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.inds-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--black);
  text-wrap: balance;
  margin: 0 0 18px;
}
.inds-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(23, 22, 23, 0.66);
  max-width: 56ch;
  text-wrap: balance;
  margin: 0;
}

.inds-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}

.inds-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px) clamp(14px, 1.8vw, 20px);
  min-height: 148px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(23, 22, 23, 0.12);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .inds-tile:hover {
    border-color: rgba(0, 156, 111, 0.4);
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(23, 22, 23, 0.22);
  }
  .inds-tile:hover .inds-tile-icon {
    background: var(--accent);
    border-color: var(--accent);
  }
}

.inds-tile.is-key {
  border-color: rgba(0, 156, 111, 0.45);
  background: rgba(0, 156, 111, 0.05);
}
.inds-tile-key {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  color: var(--accent);
}
.inds-tile-key svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.inds-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--black);
  color: var(--cream);
  border: 1px solid var(--black);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.inds-tile-icon svg { width: 28px; height: 28px; }

.inds-tile-name {
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--black);
  text-wrap: balance;
}

@media (min-width: 1280px) {
  .inds-grid.is-collapsed .inds-tile:nth-child(n+11) { display: none; }
  .inds-grid:not(.is-collapsed) .inds-tile:nth-child(5n+1):last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .inds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inds-grid.is-collapsed .inds-tile:nth-child(n+9) { display: none; }
  .inds-grid:not(.is-collapsed) .inds-tile:nth-child(4n+1):last-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .inds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inds-grid.is-collapsed .inds-tile:nth-child(n+7) { display: none; }
  .inds-grid:not(.is-collapsed) .inds-tile:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .inds { padding: 56px 0; }
  .inds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .inds-grid.is-collapsed .inds-tile:nth-child(n+7) { display: none; }
  .inds-grid:not(.is-collapsed) .inds-tile:nth-child(odd):last-child { grid-column: 1 / -1; }
  .inds-tile {
    min-height: 132px;
    padding: 22px 14px;
  }
}

.inds-actions { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 3.5vw, 40px); }
.inds-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  background: transparent;
  color: var(--black);
  border: 1px solid rgba(23, 22, 23, 0.24);
  border-radius: 100px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.inds-more svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
@media (hover: hover) {
  .inds-more:hover { border-color: var(--accent); color: var(--accent); }
  .inds-more:hover svg { transform: translateY(2px); }
}
.inds-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.inds-more[hidden] { display: none; }

.inds-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  background: var(--accent);
  color: var(--cream);
  border: 1px solid var(--accent);
  border-radius: 100px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.inds-all svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
@media (hover: hover) {
  .inds-all:hover { background: var(--accent-dark); transform: translateY(-2px); }
  .inds-all:hover svg { transform: translateX(3px); }
}
.inds-all:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

@media (max-width: 767.98px) {
  .inds-actions { flex-direction: column; align-items: stretch; }
  .inds-more, .inds-all { width: 100%; justify-content: center; }
}

@media (max-width: 375px) {
  .inds { padding: 48px 0; }
  .inds-tile { min-height: 122px; padding: 18px 12px; gap: 12px; }
  .inds-tile-icon { width: 50px; height: 50px; }
  .inds-tile-icon svg { width: 24px; height: 24px; }
}

@media (max-width: 320px) {
  .inds-grid { gap: 10px; }
  .inds-tile { padding: 16px 10px; }
}