:root {
        --ink: var(--trem-dark-background);
        --ink-soft: var(--trem-dark-background);
        --surface: var(--trem-surface);
        --surface-soft: var(--trem-background);
        --line: var(--trem-surfaceMuted);
        --muted: var(--trem-textMuted);
        --blue: var(--trem-primary);
        --blue-2: var(--trem-dark-primaryDark);
        --cyan: var(--trem-dark-primary);
        --mint: var(--trem-surfaceMuted);
        --lime: var(--trem-dark-tertiary);
        --glow: color-mix(in srgb, var(--trem-dark-primaryDark) 28%, transparent);
        --radius: 26px;
        --shadow: 0 24px 80px color-mix(in srgb, var(--trem-dark-background) 12%, transparent);
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        color: var(--ink);
        background: var(--surface);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button,
      input {
        font: inherit;
      }
      button:focus {
        outline: none;
      }
      button:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
        outline-color: color-mix(in srgb, var(--trem-dark-primaryDark) 70%, transparent);
        border-radius: 12px;
      }
      .switcher button:focus-visible,
      .cap-nav button:focus-visible {
        outline-offset: -2px;
        outline-color: color-mix(in srgb, var(--trem-dark-primaryDark) 55%, transparent);
      }
      img {
        max-width: 100%;
      }

      .site-shell {
        overflow: clip;
      }
      .container {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
      }
      .section {
        padding: clamp(56px, 6vw, 84px) 0;
      }
      .section.compact {
        padding: clamp(56px, 6vw, 84px) 0;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }
      .eyebrow.light {
        color: var(--trem-surfaceMuted);
      }
      .display {
        margin: 16px 0 0;
        max-width: 860px;
        font-size: clamp(42px, 6vw, 76px);
        line-height: 0.98;
        letter-spacing: -0.055em;
        font-weight: 700;
      }
      .section-title {
        margin: 14px 0 0;
        max-width: 820px;
        font-size: clamp(34px, 4.5vw, 56px);
        line-height: 1.02;
        letter-spacing: -0.045em;
        font-weight: 700;
      }
      .section-copy {
        margin: 20px 0 0;
        max-width: 720px;
        color: var(--muted);
        font-size: 18px;
        line-height: 1.75;
      }
      .section-copy.light {
        color: var(--trem-surfaceMuted);
      }
      .gradient-text {
        background: linear-gradient(92deg, var(--blue-2), var(--trem-dark-primary) 55%, var(--trem-dark-primaryDark));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .pill {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 48px;
        padding: 0 19px;
        border-radius: 999px;
        font-weight: 700;
        border: 1px solid transparent;
        transition:
          transform 0.3s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
      }
      .pill::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 42%;
        background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--trem-surface) 50%, transparent), transparent);
        transform: translateX(-160%) skewX(-18deg);
        opacity: 0;
        pointer-events: none;
      }
      .pill:hover {
        transform: translateY(-2px);
      }
      .pill:hover::after {
        animation: pill-shine 0.95s var(--ease-out);
      }
      .pill.magnetic {
        will-change: transform;
        transition:
          transform 0.5s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
      }
      @keyframes pill-shine {
        from {
          transform: translateX(-160%) skewX(-18deg);
          opacity: 1;
        }
        to {
          transform: translateX(360%) skewX(-18deg);
          opacity: 1;
        }
      }
      .pill.primary {
        background: var(--ink);
        color: white;
      }
      .pill.primary:hover {
        background: var(--blue);
      }
      .pill.secondary {
        background: white;
        border-color: var(--trem-surfaceMuted);
      }
      .pill.secondary:hover {
        border-color: var(--ink);
      }
      .pill.light {
        background: white;
        color: var(--ink);
      }
      .pill.ghost-light {
        border-color: color-mix(in srgb, var(--trem-surface) 25%, transparent);
        color: white;
        background: color-mix(in srgb, var(--trem-surface) 6%, transparent);
      }

      /* Header */
      .topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        border-bottom: 1px solid color-mix(in srgb, var(--trem-surfaceMuted) 90%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 86%, transparent);
        backdrop-filter: blur(18px);
      }
      .nav-wrap {
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .brand img {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        object-fit: cover;
      }
      .brand strong {
        display: block;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .brand small {
        display: block;
        margin-top: 1px;
        color: var(--trem-textMuted);
        font-size: 10px;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 26px;
        font-size: 14px;
        font-weight: 700;
      }
      .nav-links > a:not(.pill) {
        color: var(--trem-dark-surfaceMuted);
      }
      .nav-links > a:not(.pill):hover {
        color: var(--blue);
      }
      .menu-btn {
        display: none;
        border: 1px solid var(--line);
        background: white;
        border-radius: 12px;
        padding: 10px 12px;
      }
      .mobile-nav {
        display: none;
        padding: 14px 20px 20px;
        border-top: 1px solid var(--line);
        background: white;
      }
      .mobile-nav.is-open {
        display: grid;
        gap: 12px;
      }

      /* Hero */
      .hero {
        position: relative;
        padding: 74px 0 86px;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: -220px auto auto 58%;
        width: 700px;
        height: 700px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--trem-dark-primaryDark) 16%, transparent),
          color-mix(in srgb, var(--trem-dark-primary) 8%, transparent) 42%,
          transparent 69%
        );
        pointer-events: none;
      }
      .hero-grid {
        position: relative;
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        align-items: center;
        gap: 64px;
      }
      .hero-copy {
        position: relative;
        z-index: 2;
      }
      .hero-copy .display {
        font-size: clamp(46px, 5.8vw, 78px);
      }
      .hero-copy p.lead {
        margin: 24px 0 0;
        max-width: 680px;
        color: var(--muted);
        font-size: 19px;
        line-height: 1.7;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
      }
      .hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 28px;
        color: var(--trem-textMuted);
        font-size: 13px;
        font-weight: 700;
      }
      .hero-proof span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .hero-proof i {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--trem-dark-primaryDark);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--trem-dark-primaryDark) 10%, transparent);
      }

      .product-stage {
        position: relative;
        min-height: 585px;
        border-radius: 34px;
        overflow: hidden;
        background:
          radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--trem-dark-primary) 22%, transparent), transparent 27%),
          radial-gradient(circle at 10% 85%, color-mix(in srgb, var(--trem-dark-primaryDark) 24%, transparent), transparent 31%),
          linear-gradient(155deg, var(--trem-dark-background), var(--trem-dark-surface) 54%, var(--trem-dark-surface));
        box-shadow: 0 34px 100px color-mix(in srgb, var(--trem-dark-background) 22%, transparent);
        padding: 22px;
      }
      .product-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(color-mix(in srgb, var(--trem-surface) 2.5%, transparent) 1px, transparent 1px),
          linear-gradient(90deg, color-mix(in srgb, var(--trem-surface) 2.5%, transparent) 1px, transparent 1px);
        background-size: 32px 32px;
        mask-image: linear-gradient(to bottom, black, transparent);
      }
      .window {
        position: relative;
        height: 100%;
        min-height: 541px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 11%, transparent);
        border-radius: 24px;
        background: color-mix(in srgb, var(--trem-dark-background) 76%, transparent);
        overflow: hidden;
      }
      .window-bar {
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid color-mix(in srgb, var(--trem-surface) 9%, transparent);
      }
      .dots {
        display: flex;
        gap: 7px;
      }
      .dots span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--trem-surface) 22%, transparent);
      }
      .url-chip {
        font-size: 10px;
        color: var(--trem-dark-primary);
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        padding: 7px 11px;
        border-radius: 999px;
      }
      .dashboard {
        display: grid;
        grid-template-columns: 150px 1fr;
        min-height: 493px;
        color: white;
      }
      .sidebar {
        padding: 18px 13px;
        border-right: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
      }
      .side-brand {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 22px;
      }
      .side-nav {
        display: grid;
        gap: 7px;
      }
      .side-nav span {
        padding: 9px 10px;
        border-radius: 10px;
        color: var(--trem-dark-primary);
        font-size: 10px;
        font-weight: 700;
      }
      .side-nav span.active {
        color: white;
        background: color-mix(in srgb, var(--trem-dark-primaryDark) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--trem-dark-primaryDark) 18%, transparent);
      }
      .dash-main {
        padding: 22px;
        overflow: hidden;
      }
      .dash-head {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-items: center;
      }
      .dash-head small {
        color: var(--trem-dark-primary);
        font-size: 10px;
      }
      .dash-head strong {
        display: block;
        margin-top: 3px;
        font-size: 16px;
      }
      .live-badge {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        font-size: 9px;
        font-weight: 700;
        color: var(--trem-surfaceMuted);
      }
      .live-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: var(--trem-dark-success);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--trem-dark-success) 8%, transparent);
      }
      .kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 18px;
      }
      .kpi {
        min-height: 88px;
        padding: 13px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 4.5%, transparent);
      }
      .kpi small {
        color: var(--trem-dark-primary);
        font-size: 9px;
      }
      .kpi strong {
        display: block;
        margin-top: 10px;
        font-size: 21px;
        letter-spacing: -0.04em;
      }
      .kpi em {
        display: block;
        margin-top: 5px;
        color: var(--trem-dark-success);
        font-size: 8px;
        font-style: normal;
      }
      .workspace {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 10px;
        margin-top: 10px;
      }
      .panel {
        border-radius: 15px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 3.5000000000000004%, transparent);
        padding: 14px;
      }
      .panel-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 10px;
        font-weight: 700;
      }
      .panel-title span {
        color: var(--trem-dark-primary);
        font-weight: 600;
      }
      .pipeline {
        display: grid;
        gap: 8px;
        margin-top: 14px;
      }
      .lead-row {
        display: grid;
        grid-template-columns: 24px 1fr auto;
        align-items: center;
        gap: 9px;
        padding: 9px;
        border-radius: 11px;
        background: color-mix(in srgb, var(--trem-surface) 4.5%, transparent);
      }
      .avatar {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--trem-dark-primary), var(--trem-dark-primary));
        color: white;
        font-size: 8px;
        font-weight: 700;
      }
      .lead-row strong {
        font-size: 9px;
      }
      .lead-row small {
        display: block;
        margin-top: 2px;
        font-size: 7px;
        color: var(--trem-dark-primary);
      }
      .lead-row b {
        font-size: 8px;
        color: var(--trem-surfaceMuted);
      }
      .chart {
        position: relative;
        height: 146px;
        margin-top: 14px;
        overflow: hidden;
      }
      .chart::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          to bottom,
          color-mix(in srgb, var(--trem-surface) 6%, transparent) 0 1px,
          transparent 1px 36px
        );
      }
      .chart svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .float-card {
        position: absolute;
        z-index: 4;
        box-sizing: border-box;
        width: 210px;
        max-width: calc(100% - 32px);
        padding: 13px 15px;
        border-radius: 16px;
        color: var(--ink);
        background: color-mix(in srgb, var(--trem-surface) 95%, transparent);
        box-shadow: 0 18px 55px color-mix(in srgb, var(--trem-dark-background) 22%, transparent);
        backdrop-filter: blur(10px);
        animation: float 5.3s ease-in-out infinite;
      }
      .float-card strong {
        display: block;
        font-size: 12px;
      }
      .float-card small {
        display: block;
        margin-top: 3px;
        color: var(--trem-textMuted);
        font-size: 9px;
      }
      .float-card.one {
        left: 16px;
        bottom: 18px;
      }
      .float-card.two {
        right: 16px;
        top: 76px;
        animation-delay: -2.2s;
      }
      @keyframes float {
        50% {
          transform: translateY(-9px);
        }
      }

      /* marquee */
      .ticker {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--trem-background);
        overflow: hidden;
      }
      .ticker-track {
        display: flex;
        width: max-content;
        animation: marquee 24s linear infinite;
      }
      .ticker-group {
        display: flex;
        gap: 48px;
        padding: 15px 24px;
        white-space: nowrap;
        color: var(--trem-textMuted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }
      .ticker-group span::before {
        content: "✦";
        margin-right: 16px;
        color: var(--blue-2);
      }
      @keyframes marquee {
        to {
          transform: translateX(-50%);
        }
      }

      /* Audience switch */
      .audience {
        background: var(--surface-soft);
      }
      .switcher {
        display: inline-flex;
        gap: 5px;
        margin-top: 32px;
        padding: 5px;
        border-radius: 999px;
        background: var(--trem-surfaceMuted);
      }
      .switcher button {
        border: 0;
        background: transparent;
        color: var(--trem-textMuted);
        padding: 11px 16px;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 700;
      }
      .switcher button.active {
        background: white;
        color: var(--ink);
        box-shadow: 0 4px 16px color-mix(in srgb, var(--trem-dark-background) 8%, transparent);
      }
      .audience-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 42px;
        margin-top: 36px;
        align-items: stretch;
      }
      .audience-copy {
        padding: 28px 0;
      }
      .audience-copy h3 {
        margin: 0;
        font-size: 34px;
        letter-spacing: -0.04em;
      }
      .audience-copy p {
        color: var(--muted);
        line-height: 1.75;
        font-size: 17px;
      }
      .benefit-list {
        display: grid;
        gap: 13px;
        margin-top: 24px;
      }
      .benefit {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 12px;
        align-items: start;
      }
      .benefit-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: var(--trem-surfaceSubtle);
        color: var(--blue);
        font-weight: 700;
      }
      .benefit strong {
        font-size: 14px;
      }
      .benefit span {
        display: block;
        margin-top: 4px;
        color: var(--trem-textMuted);
        font-size: 13px;
        line-height: 1.55;
      }
      .audience-visual {
        position: relative;
        min-height: 430px;
        border-radius: 30px;
        overflow: hidden;
        background: var(--ink);
        color: white;
        box-shadow: var(--shadow);
      }
      .journey-ui {
        padding: 28px;
      }
      .journey-top {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
      }
      .journey-top small {
        color: var(--trem-dark-primary);
      }
      .journey-top strong {
        display: block;
        margin-top: 4px;
        font-size: 22px;
      }
      .journey-status {
        padding: 9px 12px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--trem-surfaceMuted) 12%, transparent);
        color: var(--trem-surfaceMuted);
        font-size: 10px;
        font-weight: 700;
      }
      .journey-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-top: 32px;
      }
      .journey-step {
        position: relative;
        min-height: 92px;
        padding: 13px 10px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--trem-surface) 5.5%, transparent);
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
      }
      .journey-step b {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--trem-dark-primaryDark) 24%, transparent);
        color: var(--trem-surfaceMuted);
        font-size: 9px;
      }
      .journey-step strong {
        display: block;
        margin-top: 17px;
        font-size: 9px;
      }
      .journey-step span {
        display: block;
        margin-top: 3px;
        color: var(--trem-dark-primary);
        font-size: 7px;
      }
      .journey-card {
        margin-top: 13px;
        border-radius: 18px;
        padding: 16px;
        background: white;
        color: var(--ink);
      }
      .journey-card-head {
        display: flex;
        justify-content: space-between;
        gap: 15px;
      }
      .journey-card-head small {
        color: var(--trem-textMuted);
        font-size: 9px;
      }
      .journey-card-head strong {
        display: block;
        margin-top: 2px;
        font-size: 14px;
      }
      .quote-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 14px;
      }
      .quote-option {
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 13px;
        padding: 11px;
      }
      .quote-option.active {
        border-color: var(--trem-dark-primary);
        box-shadow: inset 0 0 0 1px var(--trem-dark-primary);
        background: var(--trem-background);
      }
      .quote-option span {
        display: block;
        font-size: 8px;
        color: var(--trem-textMuted);
      }
      .quote-option strong {
        display: block;
        margin-top: 4px;
        font-size: 12px;
      }
      .quote-total {
        margin-top: 14px;
        padding: 12px 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 12px;
        background: var(--trem-surfaceSubtle);
      }
      .quote-total small {
        color: var(--trem-textMuted);
        font-size: 9px;
      }
      .quote-total b {
        font-size: 16px;
      }

      /* Capabilities */
      .cap-grid {
        display: grid;
        grid-template-columns: 330px 1fr;
        gap: 28px;
        margin-top: 44px;
      }
      .cap-nav {
        display: grid;
        gap: 9px;
        align-content: start;
      }
      .cap-nav button {
        text-align: left;
        border: 1px solid transparent;
        background: transparent;
        border-radius: 17px;
        padding: 16px 17px;
        cursor: pointer;
      }
      .cap-nav button span {
        display: block;
        color: var(--trem-textMuted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .cap-nav button strong {
        display: block;
        margin-top: 4px;
        font-size: 16px;
      }
      .cap-nav button.active {
        border-color: var(--line);
        background: white;
        box-shadow: 0 12px 35px color-mix(in srgb, var(--trem-dark-background) 6%, transparent);
      }
      .cap-stage {
        min-height: 560px;
        border-radius: 30px;
        background: var(--ink);
        color: white;
        padding: 22px;
        box-shadow: var(--shadow);
      }
      .cap-screen {
        display: none;
        height: 100%;
      }
      .cap-screen.active {
        display: block;
        animation: fadeUp 0.3s ease;
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(7px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .screen-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
        padding: 6px 4px 20px;
      }
      .screen-head small {
        color: var(--trem-dark-primary);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
      }
      .screen-head h3 {
        margin: 5px 0 0;
        font-size: 28px;
        letter-spacing: -0.04em;
      }
      .screen-chip {
        color: var(--trem-surfaceMuted);
        border: 1px solid color-mix(in srgb, var(--trem-surfaceMuted) 18%, transparent);
        background: color-mix(in srgb, var(--trem-surfaceMuted) 8%, transparent);
        border-radius: 999px;
        padding: 8px 11px;
        font-size: 9px;
        font-weight: 700;
      }
      .screen-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px;
      }
      .screen-card {
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        border-radius: 16px;
        background: color-mix(in srgb, var(--trem-surface) 4.5%, transparent);
        padding: 14px;
        min-height: 96px;
      }
      .screen-card h4 {
        margin: 0;
        font-size: 10px;
        color: var(--trem-dark-primary);
        font-weight: 700;
      }
      .screen-card strong.metric {
        display: block;
        margin-top: 12px;
        font-size: 23px;
        letter-spacing: -0.04em;
      }
      .screen-card p {
        margin: 8px 0 0;
        color: var(--trem-dark-primary);
        font-size: 9px;
        line-height: 1.5;
      }
      .span-3 {
        grid-column: span 3;
      }
      .span-4 {
        grid-column: span 4;
      }
      .span-5 {
        grid-column: span 5;
      }
      .span-7 {
        grid-column: span 7;
      }
      .span-8 {
        grid-column: span 8;
      }
      .span-12 {
        grid-column: span 12;
      }
      .mini-table {
        margin-top: 12px;
        display: grid;
        gap: 7px;
      }
      .mini-row {
        display: grid;
        grid-template-columns: 1.3fr 0.8fr 0.7fr;
        gap: 8px;
        align-items: center;
        padding: 9px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--trem-surface) 4%, transparent);
        font-size: 8px;
      }
      .mini-row span {
        color: var(--trem-dark-primary);
      }
      .status {
        justify-self: start;
        padding: 5px 7px;
        border-radius: 999px;
        color: var(--trem-surfaceMuted) !important;
        background: color-mix(in srgb, var(--trem-surfaceMuted) 9%, transparent);
        font-weight: 700;
      }
      .tour-thumb {
        height: 90px;
        border-radius: 12px;
        margin-top: 12px;
        background: linear-gradient(135deg, var(--trem-dark-primaryDark), var(--trem-dark-primary) 55%, var(--trem-surfaceMuted));
        position: relative;
        overflow: hidden;
      }
      .tour-thumb::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        right: -24px;
        top: -24px;
        background: color-mix(in srgb, var(--trem-surface) 14%, transparent);
      }
      .progress {
        margin-top: 12px;
        height: 6px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--trem-surface) 8%, transparent);
        overflow: hidden;
      }
      .progress > i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--trem-dark-primary), var(--trem-dark-primary));
      }
      .price-stack {
        margin-top: 13px;
        display: grid;
        gap: 8px;
      }
      .price-line {
        display: flex;
        justify-content: space-between;
        font-size: 9px;
        color: var(--trem-dark-primary);
      }
      .price-line.total {
        padding-top: 10px;
        border-top: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        color: white;
        font-weight: 700;
      }
      .team-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 12px;
      }
      .team-stat {
        padding: 12px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--trem-surface) 4%, transparent);
      }
      .team-stat strong {
        display: block;
        font-size: 18px;
      }
      .team-stat span {
        display: block;
        margin-top: 4px;
        color: var(--trem-dark-primary);
        font-size: 8px;
      }
      .access-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }
      .access-item {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--trem-surface) 4%, transparent);
        font-size: 8px;
      }
      .access-item span {
        color: var(--trem-surfaceMuted);
        font-weight: 700;
      }

      /* Workflow */
      .workflow {
        background: var(--ink);
        color: white;
      }
      .flowline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
        margin-top: 48px;
      }
      .flowline::before {
        content: "";
        position: absolute;
        left: 7%;
        right: 7%;
        top: 23px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--trem-textMuted) 10%, var(--trem-textMuted) 90%, transparent);
      }
      .flow-item {
        position: relative;
        z-index: 2;
      }
      .flow-number {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 15px;
        background: var(--trem-dark-surface);
        border: 1px solid var(--trem-dark-surfaceMuted);
        color: var(--trem-surfaceMuted);
        font-size: 11px;
        font-weight: 700;
      }
      .flow-item h3 {
        margin: 20px 0 0;
        font-size: 16px;
      }
      .flow-item p {
        margin: 8px 0 0;
        color: var(--trem-dark-primary);
        font-size: 12px;
        line-height: 1.55;
      }
      .flow-note {
        margin-top: 34px;
        border-radius: 22px;
        padding: 18px 20px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 8%, transparent);
        background: linear-gradient(90deg, color-mix(in srgb, var(--trem-dark-primaryDark) 12%, transparent), color-mix(in srgb, var(--trem-dark-primary) 7%, transparent));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      .flow-note strong {
        font-size: 16px;
      }
      .flow-note span {
        color: var(--trem-dark-primary);
        font-size: 12px;
      }

      /* Marketplace */
      .dual-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 42px;
      }
      .dual-card {
        position: relative;
        overflow: hidden;
        min-height: 380px;
        border-radius: 30px;
        padding: 30px;
      }
      .dual-card.dark {
        background: var(--ink);
        color: white;
      }
      .dual-card.light {
        background: var(--trem-surfaceSubtle);
      }
      .dual-card h3 {
        margin: 12px 0 0;
        max-width: 520px;
        font-size: 34px;
        letter-spacing: -0.04em;
      }
      .dual-card p {
        max-width: 500px;
        line-height: 1.7;
        color: var(--trem-textMuted);
      }
      .dual-card.dark p {
        color: var(--trem-dark-primary);
      }
      .orbit {
        position: absolute;
        right: -50px;
        bottom: -75px;
        width: 280px;
        height: 280px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 12%, transparent);
        border-radius: 50%;
      }
      .orbit::before,
      .orbit::after {
        content: "";
        position: absolute;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 12%, transparent);
        border-radius: 50%;
        inset: 38px;
      }
      .orbit::after {
        inset: 82px;
      }
      .market-card {
        position: absolute;
        right: 24px;
        bottom: 22px;
        width: 250px;
        border-radius: 18px;
        padding: 15px;
        background: white;
        box-shadow: 0 20px 55px color-mix(in srgb, var(--trem-dark-background) 16%, transparent);
      }
      .market-card small {
        color: var(--trem-textMuted);
        font-size: 9px;
      }
      .market-card strong {
        display: block;
        margin-top: 5px;
        font-size: 14px;
      }
      .market-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 11px;
      }
      .market-tags span {
        padding: 6px 8px;
        border-radius: 999px;
        background: var(--trem-surfaceSubtle);
        color: var(--trem-textMuted);
        font-size: 8px;
        font-weight: 700;
      }

      /* Partner */
      .partner-zone {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--trem-primary), var(--trem-dark-primary) 45%, var(--trem-dark-primaryDark));
        color: white;
      }
      .partner-grid {
        display: grid;
        grid-template-columns: 1fr 0.95fr;
        gap: 50px;
        align-items: center;
      }
      .partner-zone .section-copy {
        color: var(--trem-surfaceMuted);
      }
      .partner-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
      }
      .partner-feature {
        min-height: 126px;
        padding: 18px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 20%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 9%, transparent);
        border-radius: 18px;
        backdrop-filter: blur(10px);
      }
      .partner-feature strong {
        display: block;
        font-size: 14px;
      }
      .partner-feature span {
        display: block;
        margin-top: 7px;
        color: var(--trem-surfaceMuted);
        font-size: 12px;
        line-height: 1.55;
      }

      /* Pricing */
      .pricing-section {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, var(--trem-background) 0%, var(--trem-surface) 100%);
      }
      .pricing-section::before {
        position: absolute;
        inset: 10% auto auto 58%;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primaryDark) 12%, transparent), transparent 68%);
        content: "";
        pointer-events: none;
      }
      .pricing-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 42px;
      }
      .pricing-card {
        display: flex;
        min-height: 510px;
        flex-direction: column;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 28px;
        background: color-mix(in srgb, var(--trem-surface) 92%, transparent);
        box-shadow: 0 18px 52px color-mix(in srgb, var(--trem-dark-surfaceMuted) 8%, transparent);
      }
      .pricing-card.featured {
        border-color: var(--trem-dark-primary);
        background: linear-gradient(155deg, var(--trem-accent) 0%, var(--trem-dark-surfaceMuted) 100%);
        color: white;
        transform: translateY(-10px);
        box-shadow: 0 24px 60px color-mix(in srgb, var(--trem-primaryDark) 22%, transparent);
      }
      .pricing-badge {
        align-self: flex-start;
        padding: 7px 10px;
        border-radius: 999px;
        background: var(--trem-surfaceSubtle);
        color: var(--trem-primary);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .featured .pricing-badge {
        background: color-mix(in srgb, var(--trem-surfaceMuted) 13%, transparent);
        color: var(--trem-surfaceMuted);
      }
      .pricing-card h3 {
        margin: 20px 0 0;
        font-size: 25px;
      }
      .pricing-card > p {
        min-height: 70px;
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
      }
      .featured > p {
        color: var(--trem-surfaceMuted);
      }
      .pricing-price {
        display: flex;
        align-items: end;
        gap: 8px;
        margin-top: 20px;
      }
      .pricing-price strong {
        font-size: clamp(36px, 4vw, 48px);
        line-height: 1;
        letter-spacing: -0.05em;
      }
      .pricing-price span {
        padding-bottom: 5px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }
      .featured .pricing-price span {
        color: var(--trem-surfaceMuted);
      }
      .pricing-list {
        display: grid;
        gap: 12px;
        margin: 26px 0 28px;
        padding: 22px 0 0;
        border-top: 1px solid var(--line);
        list-style: none;
      }
      .featured .pricing-list {
        border-color: color-mix(in srgb, var(--trem-surface) 13%, transparent);
      }
      .pricing-list li {
        position: relative;
        padding-left: 24px;
        color: var(--trem-textMuted);
        font-size: 13px;
        line-height: 1.5;
      }
      .pricing-list li::before {
        position: absolute;
        left: 0;
        top: 1px;
        display: grid;
        place-items: center;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: var(--trem-surfaceSubtle);
        color: var(--trem-primary);
        content: "✓";
        font-size: 9px;
        font-weight: 700;
      }
      .featured .pricing-list li {
        color: var(--trem-surfaceMuted);
      }
      .featured .pricing-list li::before {
        background: color-mix(in srgb, var(--trem-surfaceMuted) 12%, transparent);
        color: var(--trem-surfaceMuted);
      }
      .pricing-card .pill {
        justify-content: center;
        margin-top: auto;
      }
      .pricing-note {
        position: relative;
        margin: 22px 0 0;
        color: var(--trem-textMuted);
        text-align: center;
        font-size: 12px;
      }

      /* Leadership */
      .leadership-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 40px;
      }
      .leader {
        border-radius: 24px;
        border: 1px solid var(--line);
        padding: 23px;
        background: white;
      }
      .leader-avatar {
        display: grid;
        place-items: center;
        width: 66px;
        height: 66px;
        border-radius: 19px;
        background: linear-gradient(135deg, var(--trem-dark-surfaceMuted), var(--trem-dark-primary));
        color: white;
        font-weight: 700;
      }
      .leader small {
        display: block;
        margin-top: 18px;
        color: var(--blue);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .leader h3 {
        margin: 7px 0 0;
        font-size: 19px;
      }
      .leader p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
      }

      /* CTA + footer */
      .cta-card {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 40px;
        align-items: end;
        border-radius: 30px;
        background: var(--trem-surfaceSubtle);
        padding: 34px;
      }
      .cta-card h2 {
        margin: 12px 0 0;
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.02;
        letter-spacing: -0.045em;
      }
      .cta-card p {
        color: var(--muted);
        line-height: 1.7;
      }
      .footer {
        background: var(--ink);
        color: white;
        padding: 56px 0 28px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 0.7fr 0.7fr;
        gap: 44px;
      }
      .footer p,
      .footer a {
        color: var(--trem-dark-primary);
        font-size: 13px;
      }
      .footer h3 {
        margin: 0 0 14px;
        font-size: 13px;
      }
      .footer-links {
        display: grid;
        gap: 10px;
      }
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 34px;
        padding-top: 20px;
        border-top: 1px solid color-mix(in srgb, var(--trem-surface) 9%, transparent);
        color: var(--trem-textMuted);
        font-size: 11px;
      }

      /* Reveal */
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(0px);
        transition:
          opacity 0.8s var(--ease-out),
          transform 0.8s var(--ease-out),
          filter 0.8s var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
      }
      .reveal[data-reveal="left"] {
        transform: translateX(-36px);
      }
      .reveal[data-reveal="right"] {
        transform: translateX(36px);
      }
      .reveal[data-reveal="zoom"] {
        transform: scale(0.93);
      }
      .reveal[data-reveal="blur"] {
        transform: translateY(15px);
        filter: blur(9px);
      }
      .reveal[data-reveal="grow-x"] {
        transform: scaleX(0);
        transform-origin: left center;
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
        filter: blur(0);
      }
      .reveal[data-reveal="grow-x"].visible {
        transform: scaleX(1);
      }
      .cursor-glow {
        position: fixed;
        z-index: -1;
        width: 420px;
        height: 420px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primaryDark) 8%, transparent), transparent 66%);
        transform: translate(-50%, -50%);
      }

      @media (max-width: 1020px) {
        .nav-links {
          display: none;
        }
        .menu-btn {
          display: block;
        }
        .hero-grid,
        .audience-grid,
        .partner-grid {
          grid-template-columns: 1fr;
        }
        .hero-grid {
          gap: 38px;
        }
        .product-stage {
          min-height: 540px;
        }
        .cap-grid {
          grid-template-columns: 1fr;
        }
        .cap-nav {
          grid-template-columns: repeat(3, 1fr);
        }
        .cap-nav button {
          text-align: center;
        }
        .pricing-grid {
          grid-template-columns: 1fr;
        }
        .pricing-card {
          min-height: auto;
        }
        .pricing-card.featured {
          transform: none;
        }
        .flowline {
          grid-template-columns: repeat(3, 1fr);
          row-gap: 36px;
        }
        .flowline::before {
          display: none;
        }
      }

      @media (max-width: 760px) {
        .container {
          width: min(100% - 28px, 1180px);
        }
        .section,
        .section.compact {
          padding: 52px 0;
        }
        .hero {
          padding: 52px 0 64px;
        }
        .brand small {
          display: none;
        }
        .product-stage {
          min-height: 460px;
          padding: 12px;
          border-radius: 24px;
        }
        .window {
          min-height: 436px;
        }
        .dashboard {
          grid-template-columns: 1fr;
          min-height: 390px;
        }
        .sidebar {
          display: none;
        }
        .dash-main {
          padding: 15px;
        }
        .kpis {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .workspace {
          grid-template-columns: 1fr;
        }
        .workspace .panel:last-child {
          display: none;
        }
        .float-card.one {
          left: 8px;
          bottom: 18px;
        }
        .float-card.two {
          right: 6px;
          top: 70px;
        }
        .journey-steps {
          grid-template-columns: repeat(2, 1fr);
        }
        .journey-step:nth-child(5) {
          grid-column: span 2;
        }
        .quote-options {
          grid-template-columns: 1fr;
        }
        .cap-nav {
          display: flex;
          gap: 8px;
          overflow-x: auto;
          padding-bottom: 6px;
          scroll-snap-type: x proximity;
          scrollbar-width: thin;
        }
        .cap-nav button {
          flex: 0 0 168px;
          min-height: 88px;
          scroll-snap-align: start;
          text-align: left;
        }
        .cap-stage {
          min-height: auto;
          padding: 15px;
        }
        .screen-head {
          flex-direction: column;
          align-items: stretch;
        }
        .screen-head h3 {
          font-size: clamp(24px, 8vw, 30px);
        }
        .screen-chip {
          align-self: flex-start;
        }
        .span-3,
        .span-4,
        .span-5,
        .span-7,
        .span-8 {
          grid-column: span 12;
        }
        .dual-grid,
        .cta-card,
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .leadership-grid,
        .pricing-grid {
          grid-template-columns: 1fr;
        }
        .flowline {
          grid-template-columns: 1fr 1fr;
        }
        .partner-features {
          grid-template-columns: 1fr;
        }
        .footer-bottom {
          flex-direction: column;
        }
      }

      @media (max-width: 480px) {
        .container {
          width: calc(100% - 24px);
        }
        .nav-wrap {
          height: 64px;
          gap: 12px;
        }
        .brand img {
          width: 38px;
          height: 38px;
        }
        .hero {
          padding: 44px 0;
        }
        .hero-actions .pill,
        .cta-card .pill {
          width: 100%;
        }
        .switcher {
          display: grid;
          grid-template-columns: 1fr 1fr;
          width: 100%;
        }
        .switcher button {
          padding-inline: 10px;
        }
        .team-stats {
          grid-template-columns: 1fr;
        }
        .mini-row {
          grid-template-columns: 1fr auto;
        }
        .mini-row > :nth-child(2) {
          display: none;
        }
        .real-product-shot .shot-label {
          align-items: flex-start;
          flex-direction: column;
        }
        .cta-card {
          padding: 24px;
        }
      }

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

      .real-product-shot {
        margin: 34px 0 28px;
        padding: 10px;
        border-radius: 24px;
        border: 1px solid var(--line);
        background: var(--trem-surface);
        box-shadow: 0 24px 70px color-mix(in srgb, var(--trem-accent) 10%, transparent);
      }
      .real-product-shot .shot-label {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        padding: 10px 10px 16px;
        font-size: 12px;
        color: var(--muted);
      }
      .real-product-shot .shot-label strong {
        color: var(--ink);
        font-size: 13px;
      }
      .real-product-shot img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .builder-preview {
        display: grid;
        grid-template-columns: 190px 1fr;
        min-height: 430px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--trem-background);
      }
      .builder-preview__nav {
        display: grid;
        align-content: start;
        gap: 8px;
        padding: 22px 16px;
        color: var(--trem-textMuted);
        background: var(--trem-dark-background);
      }
      .builder-preview__nav strong {
        margin-bottom: 12px;
        color: white;
        font-size: 14px;
      }
      .builder-preview__nav span {
        padding: 10px;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 700;
      }
      .builder-preview__nav span:first-of-type {
        color: white;
        background: color-mix(in srgb, var(--trem-dark-primaryDark) 24%, transparent);
      }
      .builder-preview__main {
        padding: 28px;
      }
      .builder-preview__main small {
        color: var(--blue);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .builder-preview__main h3 {
        margin: 8px 0 0;
        font-size: 30px;
      }
      .builder-preview__steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin: 24px 0;
      }
      .builder-preview__step {
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        font-size: 10px;
        font-weight: 700;
      }
      .builder-preview__step:first-child {
        color: white;
        border-color: var(--blue);
        background: var(--blue);
      }
      .builder-preview__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: white;
      }
      .builder-preview__field {
        min-height: 70px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--trem-textMuted);
        font-size: 10px;
      }
      .builder-preview__field strong {
        display: block;
        margin-top: 8px;
        color: var(--ink);
        font-size: 12px;
      }
      @media (max-width: 720px) {
        .builder-preview {
          grid-template-columns: 1fr;
        }
        .builder-preview__nav {
          display: none;
        }
        .builder-preview__main {
          padding: 18px;
        }
        .builder-preview__steps {
          grid-template-columns: repeat(2, 1fr);
        }
        .builder-preview__form {
          grid-template-columns: 1fr;
        }
      }

      /* ============================================================
         Apple-grade motion layer
         ============================================================ */
      :root {
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
      }

      ::selection {
        background: color-mix(in srgb, var(--trem-dark-primaryDark) 18%, transparent);
        color: var(--ink);
      }
      html {
        scrollbar-width: thin;
        scrollbar-color: var(--trem-surfaceMuted) transparent;
      }
      body::-webkit-scrollbar {
        width: 11px;
      }
      body::-webkit-scrollbar-track {
        background: transparent;
      }
      body::-webkit-scrollbar-thumb {
        border: 3px solid white;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--trem-surfaceMuted), var(--trem-surfaceMuted));
      }
      body::-webkit-scrollbar-thumb:hover {
        background: var(--trem-dark-primary);
      }

      /* scroll progress */
      #scrollProgress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 220;
        height: 3px;
        background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--trem-dark-primary));
        box-shadow: 0 1px 8px color-mix(in srgb, var(--trem-dark-primaryDark) 40%, transparent);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
      }

      /* topbar states */
      .topbar {
        transition:
          transform 0.5s var(--ease-out),
          box-shadow 0.35s ease,
          background 0.35s ease,
          border-color 0.35s ease;
      }
      .topbar.is-scrolled {
        background: color-mix(in srgb, var(--trem-surface) 82%, transparent);
        box-shadow:
          0 1px 0 color-mix(in srgb, var(--trem-surfaceMuted) 60%, transparent),
          0 14px 38px color-mix(in srgb, var(--trem-dark-background) 6%, transparent);
      }
      .topbar.is-hidden {
        transform: translateY(-102%);
      }
      .topbar.is-scrolled .nav-wrap {
        height: 60px;
      }
      .nav-wrap {
        transition: height 0.4s var(--ease-out);
      }
      .mobile-nav {
        background: color-mix(in srgb, var(--trem-surface) 97%, transparent);
        backdrop-filter: blur(16px);
      }
      .menu-btn {
        transition:
          color 0.2s ease,
          border-color 0.2s ease,
          background 0.2s ease;
      }
      .menu-btn:hover {
        border-color: var(--blue);
      }
      .menu-btn.is-open {
        color: var(--blue);
        border-color: var(--blue);
        background: var(--trem-surfaceSubtle);
      }

      /* animated nav underlines */
      .nav-links > a:not(.pill) {
        position: relative;
        transition: color 0.25s ease;
      }
      .nav-links > a:not(.pill)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -7px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--blue), var(--blue-2));
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.4s var(--ease-out);
      }
      .nav-links > a:not(.pill):hover::after {
        transform: scaleX(1);
        transform-origin: left center;
      }

      /* hero aurora + entrance */
      .hero-aurora {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .hero-aurora span {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        will-change: transform;
      }
      .hero-aurora .a {
        width: 560px;
        height: 560px;
        left: -170px;
        top: -190px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primaryDark) 30%, transparent), transparent 66%);
        animation: aurora-1 16s ease-in-out infinite alternate;
      }
      .hero-aurora .b {
        width: 640px;
        height: 640px;
        right: -210px;
        top: -160px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primary) 28%, transparent), transparent 66%);
        animation: aurora-2 19s ease-in-out infinite alternate;
      }
      .hero-aurora .c {
        width: 520px;
        height: 520px;
        left: 36%;
        bottom: -300px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primaryDark) 22%, transparent), transparent 66%);
        animation: aurora-3 22s ease-in-out infinite alternate;
      }
      @keyframes aurora-1 {
        to {
          transform: translate3d(90px, 62px, 0) scale(1.14);
        }
      }
      @keyframes aurora-2 {
        to {
          transform: translate3d(-86px, 54px, 0) scale(1.16);
        }
      }
      @keyframes aurora-3 {
        to {
          transform: translate3d(66px, -52px, 0) scale(1.08);
        }
      }

      .hero-in {
        animation: hero-in 0.95s var(--ease-out) both;
      }
      .hero-in.d-1 {
        animation-delay: 0.08s;
      }
      .hero-in.d-2 {
        animation-delay: 0.16s;
      }
      .hero-in.d-3 {
        animation-delay: 0.24s;
      }
      .hero-in.d-4 {
        animation-delay: 0.34s;
      }
      .hero-in.d-5 {
        animation-delay: 0.44s;
      }
      .hero-in.d-6 {
        animation-delay: 0.54s;
      }
      @keyframes hero-in {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* animated gradient type */
      .gradient-text {
        background-size: 200% 200%;
        animation: gradient-flow 10s ease-in-out infinite;
      }
      @keyframes gradient-flow {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      /* pulsing proof dots */
      .hero-proof i {
        animation: pulse-dot 2.4s ease-in-out infinite;
      }
      @keyframes pulse-dot {
        0%,
        100% {
          box-shadow: 0 0 0 0 color-mix(in srgb, var(--trem-dark-primaryDark) 30%, transparent);
        }
        50% {
          box-shadow: 0 0 0 7px color-mix(in srgb, var(--trem-dark-primaryDark) 0%, transparent);
        }
      }

      /* ticker polish */
      .ticker-track {
        will-change: transform;
      }
      .ticker:hover .ticker-track {
        animation-play-state: paused;
      }

      /* switcher */
      .switcher button {
        transition:
          color 0.25s ease,
          background 0.25s ease,
          box-shadow 0.35s var(--ease-out),
          transform 0.25s var(--ease-out);
      }
      .switcher button:hover:not(.active) {
        color: var(--ink);
        transform: translateY(-1px);
      }

      /* benefits */
      .benefit-icon {
        transition:
          transform 0.35s var(--ease-spring),
          box-shadow 0.3s ease,
          background 0.3s ease;
      }
      .benefit:hover .benefit-icon {
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 10px 22px color-mix(in srgb, var(--trem-dark-primaryDark) 18%, transparent);
      }
      .benefit strong {
        transition: transform 0.3s var(--ease-out);
      }
      .benefit:hover strong {
        transform: translateX(3px);
      }

      /* audience visual sheen */
      .audience-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--trem-surface) 6%, transparent) 48%, transparent 64%);
        transform: translateX(-140%);
        pointer-events: none;
        animation: sheen 8s var(--ease-in-out) infinite;
      }
      @keyframes sheen {
        0%,
        45% {
          transform: translateX(-140%);
        }
        70%,
        100% {
          transform: translateX(140%);
        }
      }
      .audience-copy.pop,
      .audience-visual.pop {
        animation: fadeUp 0.5s var(--ease-out);
      }

      /* journey steps */
      .journey-step {
        transition:
          transform 0.3s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
      }
      .journey-step:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--trem-dark-primaryDark) 35%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 9%, transparent);
      }
      .journey-step b {
        transition: transform 0.35s var(--ease-spring);
      }
      .journey-step:hover b {
        transform: scale(1.12) rotate(-4deg);
      }

      /* capability nav + screens */
      .cap-nav button {
        transition:
          border-color 0.3s ease,
          background 0.3s ease,
          box-shadow 0.3s ease,
          transform 0.3s var(--ease-out);
      }
      .cap-nav button:hover:not(.active) {
        transform: translateY(-2px);
        border-color: var(--line);
        background: white;
      }
      .cap-screen.active {
        animation: fadeUp 0.45s var(--ease-out);
      }
      .screen-card {
        transition:
          transform 0.3s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
      }
      .screen-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--trem-dark-primaryDark) 30%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 8%, transparent);
      }

      /* workflow */
      .flow-number {
        transition:
          transform 0.35s var(--ease-spring),
          background 0.3s ease,
          border-color 0.3s ease;
      }
      .flow-item:hover .flow-number {
        transform: scale(1.1) rotate(-4deg);
        background: var(--trem-dark-surfaceMuted);
        border-color: var(--trem-surfaceMuted);
      }
      .flow-item h3,
      .flow-item p {
        transition: transform 0.3s var(--ease-out);
      }
      .flow-item:hover h3 {
        transform: translateX(4px);
      }

      /* distribution */
      .orbit {
        animation: orbit-spin 42s linear infinite;
      }
      .orbit::before,
      .orbit::after {
        animation: orbit-spin 30s linear infinite reverse;
      }
      @keyframes orbit-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .market-card {
        animation: float-soft 5s ease-in-out infinite;
      }
      @keyframes float-soft {
        50% {
          transform: translateY(-6px);
        }
      }

      /* partner features */
      .partner-feature {
        transition:
          transform 0.35s var(--ease-out),
          background 0.3s ease,
          border-color 0.3s ease;
      }
      .partner-feature:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--trem-surface) 40%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 16%, transparent);
      }

      /* pricing */
      .pricing-card {
        transition:
          transform 0.45s var(--ease-out),
          box-shadow 0.45s ease,
          border-color 0.3s ease;
      }
      .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 64px color-mix(in srgb, var(--trem-dark-surfaceMuted) 14%, transparent);
      }
      .pricing-card.featured:hover {
        transform: translateY(-14px);
        box-shadow: 0 32px 74px color-mix(in srgb, var(--trem-primaryDark) 30%, transparent);
      }
      .pricing-badge {
        transition: transform 0.35s var(--ease-out);
      }
      .pricing-card:hover .pricing-badge {
        transform: translateY(-2px);
      }

      /* leadership */
      .leader {
        transition:
          transform 0.35s var(--ease-out),
          box-shadow 0.35s ease,
          border-color 0.3s ease;
      }
      .leader:hover {
        transform: translateY(-4px);
        border-color: var(--trem-surfaceMuted);
        box-shadow: 0 18px 44px color-mix(in srgb, var(--trem-accent) 10%, transparent);
      }
      .leader-avatar {
        transition:
          transform 0.35s var(--ease-spring),
          box-shadow 0.35s ease;
      }
      .leader:hover .leader-avatar {
        transform: scale(1.08) rotate(-4deg);
        box-shadow: 0 12px 26px color-mix(in srgb, var(--trem-dark-primaryDark) 30%, transparent);
      }

      /* CTA card */
      .cta-card {
        transition:
          transform 0.45s var(--ease-out),
          box-shadow 0.45s ease;
      }
      .cta-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 70px color-mix(in srgb, var(--trem-accent) 16%, transparent);
      }

      /* float cards */
      .float-card {
        will-change: transform;
      }

      /* motion helpers */
      [data-parallax] {
        translate: 0 var(--parallax-y, 0px);
        will-change: translate;
      }
      [data-tilt] {
        transform-style: preserve-3d;
        will-change: transform;
      }

      /* back to top */
      .to-top {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 96;
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 16%, transparent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--trem-dark-background) 88%, transparent);
        color: white;
        cursor: pointer;
        opacity: 0;
        transform: translateY(18px) scale(0.85);
        pointer-events: none;
        backdrop-filter: blur(12px);
        box-shadow: 0 16px 38px color-mix(in srgb, var(--trem-dark-background) 30%, transparent);
        transition:
          opacity 0.35s ease,
          transform 0.5s var(--ease-spring),
          box-shadow 0.3s ease,
          background 0.3s ease;
      }
      .to-top.is-visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .to-top:hover {
        transform: translateY(-4px);
        background: var(--blue);
        box-shadow: 0 20px 46px color-mix(in srgb, var(--trem-dark-primaryDark) 40%, transparent);
      }

      @media (max-width: 1020px) {
        .hero-aurora .a {
          left: -240px;
        }
        .hero-aurora .b {
          right: -260px;
        }
      }

      @media (max-width: 760px) {
        .to-top {
          width: 46px;
          height: 46px;
          right: 16px;
          bottom: 16px;
        }
        .hero-aurora .a,
        .hero-aurora .b {
          width: 430px;
          height: 430px;
        }
        .hero-aurora .c {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          filter: none;
        }
        html {
          scroll-behavior: auto;
        }
      }