:root {
        --ink: var(--trem-dark-surface);
        --ink-2: var(--trem-dark-background);
        --surface: var(--trem-surface);
        --soft: var(--trem-background);
        --soft-2: var(--trem-surfaceSubtle);
        --line: var(--trem-surfaceMuted);
        --muted: var(--trem-textMuted);
        --primary: var(--trem-primary);
        --primary-2: var(--trem-primaryDark);
        --lavender: var(--trem-dark-primary);
        --blue-soft: var(--trem-surfaceMuted);
        --success: var(--trem-success);
        --shadow: 0 24px 72px color-mix(in srgb, var(--trem-accent) 12%, transparent);
        --shadow-lg: 0 40px 110px color-mix(in srgb, var(--trem-accent) 18%, transparent);
        --radius: 28px;
      }

      * {
        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;
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button,
      input {
        font: inherit;
      }
      button {
        color: inherit;
      }
      button:focus {
        outline: none;
      }
      button:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
        outline-color: color-mix(in srgb, var(--trem-primary) 70%, transparent);
        border-radius: 12px;
      }
      .demo-tab:focus-visible {
        outline-offset: -3px;
        outline-color: color-mix(in srgb, var(--trem-primary) 55%, transparent);
      }
      .site-shell {
        overflow: clip;
      }
      .container {
        width: min(1240px, calc(100% - 40px));
        margin: 0 auto;
      }
      .section {
        padding: clamp(56px, 6vw, 84px) 0;
      }
      .section.tight {
        padding: clamp(56px, 6vw, 84px) 0;
      }
      .section.soft {
        background: var(--soft);
      }
      .section.dark {
        background: var(--ink);
        color: white;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }
      .eyebrow::before {
        content: "";
        width: 24px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }
      .eyebrow.light {
        color: var(--trem-surfaceMuted);
      }
      .display {
        margin: 16px 0 0;
        font-size: clamp(46px, 6.4vw, 84px);
        line-height: 0.98;
        letter-spacing: -0.058em;
        font-weight: 700;
      }
      .section-title {
        margin: 14px 0 0;
        max-width: 860px;
        font-size: clamp(36px, 4.5vw, 58px);
        line-height: 1.03;
        letter-spacing: -0.045em;
        font-weight: 700;
      }
      .section-copy {
        margin: 18px 0 0;
        max-width: 760px;
        color: var(--muted);
        font-size: 18px;
        line-height: 1.75;
      }
      .section-copy.light {
        color: var(--trem-surfaceMuted);
      }
      .gradient-text {
        color: transparent;
        background: linear-gradient(96deg, var(--primary) 0%, var(--primary-2) 52%, var(--trem-textMuted) 100%);
        -webkit-background-clip: text;
        background-clip: text;
      }

      .pill {
        position: relative;
        overflow: hidden;
        min-height: 49px;
        padding: 0 20px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 1px solid transparent;
        font-size: 14px;
        font-weight: 700;
        transition:
          transform 0.3s var(--ease-out),
          box-shadow 0.3s ease,
          background 0.3s ease,
          border-color 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) 55%, 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),
          box-shadow 0.3s ease,
          background 0.3s ease,
          border-color 0.3s ease;
      }
      @keyframes pill-shine {
        from {
          transform: translateX(-160%) skewX(-18deg);
          opacity: 1;
        }
        to {
          transform: translateX(360%) skewX(-18deg);
          opacity: 1;
        }
      }
      .pill.primary {
        color: white;
        background: linear-gradient(135deg, var(--primary), var(--trem-textMuted));
        box-shadow: 0 12px 30px color-mix(in srgb, var(--trem-primary) 22%, transparent);
      }
      .pill.primary:hover {
        box-shadow: 0 16px 34px color-mix(in srgb, var(--trem-primary) 30%, transparent);
      }
      .pill.secondary {
        border-color: var(--trem-surfaceMuted);
        background: white;
        color: var(--trem-primaryDark);
      }
      .pill.secondary:hover {
        border-color: var(--primary);
      }
      .pill.light {
        color: var(--ink);
        background: white;
      }
      .pill.ghost-light {
        color: white;
        border-color: color-mix(in srgb, var(--trem-surface) 22%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 6%, transparent);
      }
      .link-arrow {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        color: var(--primary);
        font-weight: 700;
        font-size: 14px;
      }

      /* Header */
      .topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        background: color-mix(in srgb, var(--trem-surface) 88%, transparent);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid color-mix(in srgb, var(--trem-surfaceMuted) 90%, transparent);
      }
      .nav-wrap {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 0 0 auto;
      }
      .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: 2px;
        color: var(--trem-textMuted);
        font-size: 10px;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 25px;
        color: var(--trem-textMuted);
        font-size: 13px;
        font-weight: 780;
      }
      .nav-links > a:not(.pill):hover {
        color: var(--primary);
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .menu-btn {
        display: none;
        border: 1px solid var(--line);
        background: white;
        border-radius: 12px;
        padding: 9px 12px;
        cursor: pointer;
      }
      .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: 78px 0 72px;
        background:
          radial-gradient(circle at 87% 10%, color-mix(in srgb, var(--trem-dark-primary) 16%, transparent), transparent 26%),
          radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--trem-dark-primaryDark) 8%, transparent), transparent 28%),
          linear-gradient(180deg, var(--trem-surface) 0%, var(--trem-background) 100%);
      }
      .hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--line);
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 0.84fr 1.16fr;
        align-items: center;
        gap: 58px;
      }
      .hero-copy {
        position: relative;
        z-index: 2;
      }
      .hero-copy .lead {
        margin: 24px 0 0;
        max-width: 650px;
        color: var(--muted);
        font-size: 19px;
        line-height: 1.72;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
        margin-top: 30px;
      }
      .hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 28px;
        color: var(--trem-textMuted);
        font-size: 12px;
        font-weight: 700;
      }
      .hero-proof span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .hero-proof i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--primary);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--trem-primary) 9%, transparent);
      }

      .hero-product {
        position: relative;
        padding: 18px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 32px;
        background: color-mix(in srgb, var(--trem-surface) 82%, transparent);
        box-shadow: var(--shadow-lg);
      }
      .hero-product::before {
        content: "";
        position: absolute;
        inset: auto 8% -38px 8%;
        height: 60px;
        background: color-mix(in srgb, var(--trem-textMuted) 20%, transparent);
        filter: blur(34px);
        border-radius: 50%;
      }
      .browser-bar {
        height: 38px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 5px 12px;
      }
      .browser-bar span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--trem-surfaceMuted);
      }
      .browser-bar small {
        margin-left: 7px;
        color: var(--trem-textMuted);
        font-size: 10px;
      }
      .hero-product img {
        position: relative;
        width: 100%;
        border-radius: 20px;
        border: 1px solid var(--trem-surfaceMuted);
      }
      .platform-visual {
        position: relative;
        min-height: 450px;
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 20px;
        background: var(--trem-background);
        color: var(--ink);
        box-shadow: 0 24px 60px color-mix(in srgb, var(--trem-dark-surfaceMuted) 12%, transparent);
      }
      .platform-visual__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 18px;
        border-bottom: 1px solid var(--trem-surfaceMuted);
        background: color-mix(in srgb, var(--trem-surface) 90%, transparent);
      }
      .platform-visual__brand {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        font-weight: 700;
      }
      .platform-visual__mark {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: white;
        background: linear-gradient(145deg, var(--primary), var(--primary-2));
      }
      .platform-visual__status {
        padding: 6px 9px;
        border-radius: 999px;
        color: var(--trem-primary);
        background: var(--trem-surfaceMuted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .platform-visual__body {
        display: grid;
        grid-template-columns: 128px 1fr;
        min-height: 394px;
      }
      .platform-visual__nav {
        display: grid;
        align-content: start;
        gap: 7px;
        padding: 18px 12px;
        border-right: 1px solid var(--trem-surfaceMuted);
        background: var(--trem-surface);
      }
      .platform-visual__nav span {
        padding: 9px 10px;
        border-radius: 9px;
        color: var(--trem-textMuted);
        font-size: 9px;
        font-weight: 700;
      }
      .platform-visual__nav span:first-child {
        color: var(--trem-primary);
        background: var(--trem-surfaceSubtle);
      }
      .platform-visual__main {
        padding: 22px;
      }
      .platform-visual__main small {
        color: var(--trem-textMuted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }
      .platform-visual__main h3 {
        margin: 7px 0 0;
        color: var(--trem-dark-background);
        font-size: 24px;
        letter-spacing: -0.04em;
      }
      .platform-visual__metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-top: 20px;
      }
      .platform-visual__metric,
      .platform-visual__card {
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 13px;
        background: var(--trem-surface);
      }
      .platform-visual__metric {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        min-width: 0;
        padding: 13px 14px;
      }
      .platform-visual__metric strong {
        display: block;
        font-size: 21px;
        line-height: 1;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
      }
      .platform-visual__metric span {
        display: block;
        margin-top: 5px;
        min-width: 0;
        color: var(--trem-textMuted);
        font-size: 10px;
        line-height: 1.35;
        font-weight: 700;
      }
      .platform-visual__card {
        margin-top: 10px;
        padding: 14px;
      }
      .platform-visual__row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--trem-surfaceSubtle);
      }
      .platform-visual__row:last-child {
        border-bottom: 0;
      }
      .platform-visual__row strong {
        font-size: 10px;
      }
      .platform-visual__row span {
        color: var(--trem-textMuted);
        font-size: 8px;
        font-weight: 700;
      }
      .platform-visual--dark {
        border-color: color-mix(in srgb, var(--trem-surface) 14%, transparent);
        background: var(--trem-dark-surface);
      }
      .platform-visual--dark .platform-visual__top,
      .platform-visual--dark .platform-visual__nav,
      .platform-visual--dark .platform-visual__metric,
      .platform-visual--dark .platform-visual__card {
        border-color: color-mix(in srgb, var(--trem-surface) 10%, transparent);
        background: var(--trem-accent);
        color: white;
      }
      .platform-visual--dark .platform-visual__body,
      .platform-visual--dark .platform-visual__row {
        border-color: color-mix(in srgb, var(--trem-surface) 9%, transparent);
      }
      .platform-visual--dark .platform-visual__main small {
        color: var(--trem-surfaceMuted);
      }
      .platform-visual--dark .platform-visual__main h3 {
        color: var(--trem-surface);
      }
      .floating-proof {
        position: absolute;
        left: -30px;
        bottom: 42px;
        width: 215px;
        padding: 15px;
        border-radius: 17px;
        border: 1px solid var(--trem-surfaceMuted);
        background: color-mix(in srgb, var(--trem-surface) 96%, transparent);
        box-shadow: 0 18px 50px color-mix(in srgb, var(--trem-accent) 15%, transparent);
        animation: float 5s ease-in-out infinite;
      }
      .floating-proof b {
        display: block;
        font-size: 12px;
      }
      .floating-proof span {
        display: block;
        margin-top: 5px;
        color: var(--trem-textMuted);
        font-size: 10px;
        line-height: 1.5;
      }
      .floating-proof .mini-line {
        margin-top: 12px;
        height: 5px;
        border-radius: 999px;
        background: var(--trem-surfaceMuted);
        overflow: hidden;
      }
      .floating-proof .mini-line::after {
        content: "";
        display: block;
        width: 72%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--primary), var(--primary-2));
      }
      @keyframes float {
        50% {
          transform: translateY(-8px);
        }
      }

      /* promise strip */
      .promise-strip {
        border-bottom: 1px solid var(--line);
        background: white;
      }
      .promise-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .promise {
        padding: 24px 28px;
        border-right: 1px solid var(--line);
      }
      .promise:first-child {
        border-left: 1px solid var(--line);
      }
      .promise small {
        display: block;
        color: var(--trem-textMuted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .promise strong {
        display: block;
        margin-top: 8px;
        font-size: 15px;
      }

      /* marquee ticker */
      .ticker {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, var(--trem-surface), var(--trem-background));
      }
      .ticker-track {
        display: flex;
        width: max-content;
        animation: marquee 26s linear infinite;
        will-change: transform;
      }
      .ticker:hover .ticker-track {
        animation-play-state: paused;
      }
      .ticker-group {
        display: flex;
        gap: 44px;
        padding: 15px 22px;
        white-space: nowrap;
        align-items: center;
        color: var(--trem-textMuted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .ticker-group span::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--trem-primary) 10%, transparent);
      }
      @keyframes marquee {
        to {
          transform: translateX(-50%);
        }
      }

      /* traveller capabilities */
      .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 44px;
      }
      .feature-card {
        position: relative;
        min-height: 235px;
        padding: 25px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: white;
        transform-style: preserve-3d;
        transition:
          transform 0.3s var(--ease-out),
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        will-change: transform;
      }
      .feature-card:hover {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
          translateY(-6px);
        border-color: var(--trem-surfaceMuted);
        box-shadow: 0 22px 50px color-mix(in srgb, var(--trem-accent) 12%, transparent);
      }
      .feature-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: var(--blue-soft);
        color: var(--primary);
        transition:
          transform 0.45s var(--ease-spring),
          box-shadow 0.35s ease;
      }
      .feature-card:hover .feature-icon {
        transform: translateY(-3px) scale(1.08) rotate(-4deg);
        box-shadow: 0 12px 24px color-mix(in srgb, var(--trem-primary) 18%, transparent);
      }
      .feature-card h3 {
        margin: 30px 0 0;
        font-size: 21px;
        letter-spacing: -0.025em;
        transform: translateZ(22px);
      }
      .feature-card p {
        margin: 9px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.65;
        transform: translateZ(12px);
      }
      .feature-icon svg {
        width: 20px;
        height: 20px;
      }
      .feature-card b {
        position: absolute;
        right: 18px;
        top: 15px;
        color: var(--trem-surfaceMuted);
        font-size: 48px;
        line-height: 1;
      }

      /* products showcase */
      .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
        gap: 16px;
        margin-top: 44px;
      }
      .product-card {
        position: relative;
        min-height: 330px;
        padding: 26px;
        display: flex;
        flex-direction: column;
        text-align: left;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: white;
        cursor: pointer;
        font: inherit;
        transform-style: preserve-3d;
        transition:
          transform 0.3s var(--ease-out),
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        will-change: transform;
      }
      .product-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
          120deg,
          transparent 32%,
          color-mix(in srgb, var(--trem-dark-primary) 8%, transparent) 50%,
          transparent 68%
        );
        transform: translateX(-130%);
        pointer-events: none;
      }
      .product-card:hover {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
          translateY(-6px);
        border-color: var(--trem-surfaceMuted);
        box-shadow: 0 24px 52px color-mix(in srgb, var(--trem-accent) 13%, transparent);
      }
      .product-card:hover::after {
        animation: card-shine 0.95s var(--ease-out);
      }
      @keyframes card-shine {
        from {
          transform: translateX(-130%);
        }
        to {
          transform: translateX(230%);
        }
      }
      .product-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .product-card__icon {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: white;
        font-size: 22px;
        transition:
          transform 0.45s var(--ease-spring),
          box-shadow 0.35s ease;
      }
      .product-card:hover .product-card__icon {
        transform: translateY(-3px) scale(1.08) rotate(-4deg);
        box-shadow: 0 12px 26px color-mix(in srgb, var(--trem-primary) 24%, transparent);
      }
      .product-card__status {
        padding: 6px 10px;
        border-radius: 999px;
        color: var(--primary);
        background: var(--blue-soft);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .product-card h3 {
        margin: 22px 0 0;
        font-size: 23px;
        letter-spacing: -0.03em;
      }
      .product-card > p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
      }
      .product-card__points {
        display: grid;
        gap: 8px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }
      .product-card__points li {
        position: relative;
        padding-left: 18px;
        color: var(--trem-textMuted);
        font-size: 12.5px;
        line-height: 1.5;
      }
      .product-card__points li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--primary);
        font-weight: 700;
      }
      .product-card__action {
        margin-top: auto;
        padding-top: 20px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--primary);
        font-size: 13px;
        font-weight: 700;
      }

      /* product details modal */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid;
        place-items: center;
        padding: 24px;
        background: color-mix(in srgb, var(--trem-dark-background) 62%, transparent);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
      }
      .modal-backdrop.closing {
        opacity: 0;
      }
      .modal-backdrop:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.32s ease;
      }
      .modal-backdrop[hidden] {
        display: none;
      }
      .modal {
        position: relative;
        width: min(680px, 100%);
        max-height: min(86vh, 720px);
        overflow: auto;
        padding: 40px;
        border-radius: 28px;
        border: 1px solid var(--line);
        background: white;
        box-shadow: var(--shadow-lg);
        animation: modal-in 0.5s var(--ease-spring);
      }
      @keyframes modal-in {
        from {
          opacity: 0;
          transform: translateY(22px) scale(0.96);
        }
        60% {
          opacity: 1;
          transform: translateY(-3px) scale(1.005);
        }
      }
      .modal__close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        cursor: pointer;
        color: var(--muted);
        font-size: 20px;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      .modal__close:hover {
        color: var(--ink);
        border-color: var(--primary);
      }
      .modal__content .modal-status {
        width: fit-content;
        padding: 6px 10px;
        border-radius: 999px;
        color: var(--primary);
        background: var(--blue-soft);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .modal__content h3 {
        margin: 18px 0 0;
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -0.045em;
        font-weight: 700;
      }
      .modal-tagline {
        margin: 8px 0 0;
        color: var(--primary);
        font-size: 16px;
        font-weight: 700;
      }
      .modal-about {
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.75;
      }
      .modal-features {
        display: grid;
        gap: 11px;
        margin: 26px 0 0;
        padding: 24px;
        border-radius: 18px;
        background: var(--soft);
        list-style: none;
      }
      .modal-features li {
        display: flex;
        gap: 11px;
        align-items: flex-start;
        color: var(--trem-textMuted);
        font-size: 14px;
        line-height: 1.55;
      }
      .modal-features li::before {
        content: "✓";
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        margin-top: 1px;
        border-radius: 7px;
        background: var(--blue-soft);
        color: var(--primary);
        font-size: 11px;
        font-weight: 700;
      }
      .modal__footer {
        margin-top: 28px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
      }
      body.modal-open {
        overflow: hidden;
      }
      .modal-product-state {
        width: fit-content;
        padding: 7px 11px;
        border-radius: 999px;
        color: var(--primary);
        background: var(--blue-soft);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .modal-visual {
        margin: 26px 0 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 26px;
        background: linear-gradient(180deg, var(--trem-background), var(--trem-surfaceSubtle));
      }
      .modal-visual .platform-visual {
        min-height: 380px;
        box-shadow: 0 18px 48px color-mix(in srgb, var(--trem-dark-surfaceMuted) 12%, transparent);
      }
      .modal .platform-visual__metric,
      .modal .platform-visual__row {
        animation: modal-lift 0.55s var(--ease-out) both;
      }
      .modal .platform-visual__metric:nth-child(2),
      .modal .platform-visual__row:nth-child(2) {
        animation-delay: 0.08s;
      }
      .modal .platform-visual__metric:nth-child(3),
      .modal .platform-visual__row:nth-child(3) {
        animation-delay: 0.16s;
      }
      .modal .platform-visual__row:nth-child(1) {
        animation-delay: 0.1s;
      }
      @keyframes modal-lift {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }

      /* product demo */
      .demo-shell {
        margin-top: 44px;
        border: 1px solid var(--line);
        border-radius: 30px;
        background: white;
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .demo-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 15px 18px;
        border-bottom: 1px solid var(--line);
      }
      .demo-tabset {
        display: grid;
        grid-template-columns: repeat(4, minmax(145px, 1fr));
        gap: 10px;
        width: min(100%, 760px);
        padding: 10px;
        border-radius: 24px;
        background: var(--trem-surfaceSubtle);
      }
      .demo-tab {
        border: 0;
        padding: 16px 18px;
        border-radius: 16px;
        background: transparent;
        color: var(--trem-textMuted);
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
      }
      .demo-tab.active {
        color: var(--ink);
        background: white;
        box-shadow:
          0 0 0 5px var(--trem-surfaceMuted),
          0 8px 20px color-mix(in srgb, var(--trem-accent) 10%, transparent);
      }
      .demo-caption {
        color: var(--trem-textMuted);
        font-size: 11px;
      }
      .demo-stage {
        position: relative;
        min-height: 590px;
        padding: 20px;
        background: var(--trem-background);
      }
      .demo-screen {
        display: none;
      }
      .demo-screen.active {
        display: block;
        animation: fadeUp 0.5s var(--ease-out);
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(16px) scale(0.99);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .demo-screen img {
        display: block;
        width: 100%;
        height: min(58vw, 550px);
        object-fit: contain;
        object-position: top center;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 18px;
        background: var(--trem-surfaceSubtle);
        box-shadow: 0 24px 60px color-mix(in srgb, var(--trem-dark-surfaceMuted) 12%, transparent);
      }
      .product-preview {
        height: min(58vw, 550px);
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 18px;
        background: var(--trem-background);
        box-shadow: 0 24px 60px color-mix(in srgb, var(--trem-dark-surfaceMuted) 12%, transparent);
        color: var(--trem-dark-surface);
      }
      .tour-listing-preview {
        padding: 18px;
      }
      .listing-heading {
        font-size: 12px;
        font-weight: 700;
      }
      .listing-chips {
        display: flex;
        gap: 6px;
        margin: 9px 0 8px;
      }
      .listing-chips span {
        padding: 6px 10px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 999px;
        background: white;
        color: var(--trem-dark-surfaceMuted);
        font-size: 7px;
        font-weight: 700;
      }
      .listing-chips span:first-child {
        border-color: var(--trem-primary);
        background: var(--trem-primary);
        color: white;
      }
      .listing-custom {
        margin-bottom: 11px;
        color: var(--trem-textMuted);
        font-size: 8px;
      }
      .listing-custom b {
        color: var(--trem-primary);
        text-decoration: underline;
      }
      .listing-search {
        display: grid;
        grid-template-columns: auto 1fr 110px;
        gap: 8px;
        padding: 9px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 12px;
        background: white;
      }
      .listing-search span,
      .listing-search b {
        min-height: 32px;
        display: flex;
        align-items: center;
        padding: 0 11px;
        border-radius: 8px;
        font-size: 8px;
      }
      .listing-search span {
        border: 1px solid var(--trem-surfaceMuted);
        color: var(--trem-textMuted);
      }
      .listing-search span:first-child {
        color: var(--trem-primary);
        font-weight: 700;
      }
      .listing-search b {
        justify-content: center;
        background: var(--trem-primary);
        color: white;
      }
      .listing-count {
        margin: 12px 0 7px;
        font-size: 8px;
        font-weight: 700;
      }
      .listing-notice {
        width: max-content;
        max-width: 100%;
        margin-bottom: 8px;
        padding: 6px 9px;
        border: 1px solid var(--trem-dark-primary);
        border-radius: 6px;
        color: var(--trem-dark-primaryDark);
        font-size: 7px;
        font-weight: 700;
      }
      .listing-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
      .listing-card {
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 13px;
        background: white;
      }
      .listing-card__image {
        position: relative;
        height: 116px;
        background-position: center;
        background-size: cover;
      }
      .listing-card__image::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        background: linear-gradient(transparent, color-mix(in srgb, var(--trem-dark-background) 36%, transparent));
      }
      .listing-card__badges {
        position: absolute;
        z-index: 1;
        inset: 8px 8px auto;
        display: flex;
        justify-content: space-between;
        color: var(--trem-dark-surfaceMuted);
        font-size: 7px;
        font-weight: 700;
      }
      .listing-card__badges span {
        padding: 4px 6px;
        border-radius: 999px;
        background: white;
      }
      .listing-card__content {
        padding: 9px;
      }
      .listing-card__content small {
        color: var(--trem-primary);
        font-size: 6px;
        font-weight: 700;
      }
      .listing-card__content h4 {
        min-height: 28px;
        margin: 4px 0;
        font-size: 9px;
        line-height: 1.3;
      }
      .listing-card__meta {
        color: var(--trem-textMuted);
        font-size: 7px;
      }
      .listing-card__prices {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 7px;
        padding-top: 6px;
        border-top: 1px solid var(--trem-surfaceSubtle);
        text-align: center;
        font-size: 6px;
      }
      .listing-card__prices b {
        display: block;
        margin-top: 2px;
        font-size: 7px;
      }
      .listing-card__action {
        display: block;
        margin-top: 7px;
        padding: 6px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--trem-primary), var(--trem-textMuted));
        color: white;
        text-align: center;
        font-size: 7px;
        font-weight: 700;
      }
      .tour-detail-preview {
        padding: 14px;
      }
      .tour-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tour-detail-header small {
        color: var(--trem-primary);
        font-size: 8px;
        font-weight: 700;
      }
      .tour-detail-search {
        width: 42%;
        padding: 8px 10px;
        border-radius: 8px;
        background: white;
        color: var(--trem-textMuted);
        font-size: 7px;
      }
      .tour-detail-tabs {
        display: flex;
        gap: 7px;
        margin: 11px 0 7px;
        padding: 7px;
        border-radius: 9px;
        background: white;
      }
      .tour-detail-tabs span {
        padding: 6px 8px;
        color: var(--trem-textMuted);
        font-size: 7px;
        font-weight: 700;
      }
      .tour-detail-tabs span:first-child {
        border-radius: 6px;
        color: var(--trem-primary);
        background: var(--trem-surfaceSubtle);
      }
      .tour-detail-facts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
      }
      .tour-detail-facts div {
        padding: 10px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 8px;
        background: white;
      }
      .tour-detail-facts small {
        display: block;
        color: var(--trem-textMuted);
        font-size: 6px;
      }
      .tour-detail-facts b {
        font-size: 8px;
      }
      .tour-detail-operator {
        display: flex;
        justify-content: space-between;
        margin-top: 9px;
        padding: 12px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 9px;
        background: white;
        font-size: 8px;
      }
      .tour-detail-highlights {
        margin-top: 9px;
        padding: 11px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 10px;
        background: white;
      }
      .tour-detail-highlights h4 {
        margin: 0 0 8px;
        color: var(--trem-primary);
        font-size: 10px;
      }
      .tour-detail-highlight-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
      }
      .tour-detail-highlight-grid div {
        min-height: 65px;
        padding: 9px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 8px;
      }
      .tour-detail-highlight-grid b {
        display: block;
        font-size: 8px;
      }
      .tour-detail-highlight-grid span {
        color: var(--trem-textMuted);
        font-size: 6px;
        line-height: 1.4;
      }
      .tour-detail-packages {
        margin-top: 9px;
        padding: 12px;
        border-radius: 10px;
        background: white;
      }
      .tour-detail-packages h3 {
        margin: 0 0 8px;
        font-size: 13px;
      }
      .tour-detail-package-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .tour-detail-package-grid div {
        padding: 10px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 8px;
        background: var(--trem-surfaceSubtle);
      }
      .tour-detail-package-grid div:nth-child(2) {
        border-color: var(--trem-primary);
        background: var(--trem-surface);
      }
      .tour-detail-package-grid small {
        font-size: 6px;
        font-weight: 700;
      }
      .tour-detail-package-grid b {
        float: right;
        color: var(--trem-primary);
        font-size: 9px;
      }
      .tour-detail-package-grid h4 {
        margin: 10px 0 3px;
        font-size: 9px;
      }
      .tour-detail-package-grid p {
        min-height: 24px;
        margin: 0;
        color: var(--trem-textMuted);
        font-size: 6px;
        line-height: 1.4;
      }
      .tour-detail-package-grid ul {
        margin: 7px 0;
        padding: 0;
        list-style: none;
        color: var(--trem-textMuted);
        font-size: 6px;
        line-height: 1.65;
      }
      .tour-detail-package-grid li::before {
        content: "✓";
        margin-right: 4px;
        color: var(--trem-primary);
        font-weight: 700;
      }
      .tour-detail-package-grid button {
        width: 100%;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 6px;
        padding: 6px;
        background: white;
        color: var(--trem-primary);
        font: inherit;
        font-size: 6px;
        font-weight: 700;
      }
      .tour-detail-package-grid div:nth-child(2) button {
        border-color: var(--trem-primary);
        background: var(--trem-primary);
        color: white;
      }
      .tour-booking-preview {
        padding: 18px;
      }
      .tour-booking-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 20px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 16px;
        background: linear-gradient(135deg, var(--trem-surface), var(--trem-surfaceSubtle));
      }
      .tour-booking-head small {
        color: var(--trem-primary);
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.1em;
      }
      .tour-booking-head h3 {
        margin: 5px 0 2px;
        font-size: 20px;
      }
      .tour-booking-head p {
        margin: 0;
        color: var(--trem-textMuted);
        font-size: 8px;
      }
      .tour-booking-status {
        padding: 8px 11px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 999px;
        background: var(--trem-surfaceSubtle);
        color: var(--trem-success);
        font-size: 8px;
        font-weight: 700;
        white-space: nowrap;
      }
      .tour-booking-layout {
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 12px;
        margin-top: 12px;
      }
      .tour-booking-timeline,
      .tour-booking-quote {
        padding: 15px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 14px;
        background: white;
      }
      .tour-booking-timeline h4,
      .tour-booking-quote h4 {
        margin: 0 0 11px;
        font-size: 12px;
      }
      .tour-booking-step {
        position: relative;
        min-height: 62px;
        padding: 5px 8px 8px 34px;
      }
      .tour-booking-step::before {
        position: absolute;
        left: 3px;
        top: 3px;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 50%;
        background: white;
        color: var(--trem-textMuted);
        content: attr(data-step);
        font-size: 7px;
        font-weight: 700;
      }
      .tour-booking-step:not(:last-child)::after {
        position: absolute;
        left: 13px;
        top: 27px;
        width: 1px;
        height: 34px;
        background: var(--trem-surfaceMuted);
        content: "";
      }
      .tour-booking-step.done::before {
        border-color: var(--trem-primary);
        background: var(--trem-primary);
        color: white;
        content: "✓";
      }
      .tour-booking-step.current {
        border-radius: 10px;
        background: var(--trem-surfaceSubtle);
      }
      .tour-booking-step.current::before {
        border-color: var(--trem-primary);
        color: var(--trem-primary);
      }
      .tour-booking-step b,
      .tour-booking-step span {
        display: block;
      }
      .tour-booking-step b {
        font-size: 9px;
      }
      .tour-booking-step span {
        margin-top: 3px;
        color: var(--trem-textMuted);
        font-size: 7px;
        line-height: 1.4;
      }
      .tour-booking-quote__intro {
        padding: 12px;
        border-radius: 10px;
        background: var(--trem-surfaceSubtle);
      }
      .tour-booking-quote__intro small {
        color: var(--trem-primary);
        font-size: 6px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }
      .tour-booking-quote__intro strong {
        display: block;
        margin-top: 4px;
        font-size: 11px;
      }
      .tour-booking-price {
        margin-top: 10px;
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 10px;
      }
      .tour-booking-price div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 11px;
        border-bottom: 1px solid var(--trem-surfaceMuted);
        color: var(--trem-textMuted);
        font-size: 8px;
      }
      .tour-booking-price div:last-child {
        border: 0;
        background: var(--trem-surfaceSubtle);
        color: var(--trem-accent);
        font-size: 10px;
        font-weight: 700;
      }
      .tour-booking-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
        margin-top: 11px;
      }
      .tour-booking-actions span {
        padding: 8px 6px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 7px;
        color: var(--trem-primary);
        text-align: center;
        font-size: 7px;
        font-weight: 700;
      }
      .tour-booking-actions span:last-child {
        border-color: var(--trem-primary);
        background: var(--trem-primary);
        color: white;
      }
      .bookings-preview {
        padding: 18px;
      }
      .bookings-breadcrumb {
        color: var(--trem-primary);
        font-size: 8px;
        font-weight: 700;
      }
      .bookings-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        padding: 18px 20px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 16px;
        background: linear-gradient(135deg, var(--trem-surface), var(--trem-surfaceSubtle));
      }
      .bookings-hero small {
        color: var(--trem-primary);
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }
      .bookings-hero h3 {
        margin: 5px 0 2px;
        font-size: 22px;
      }
      .bookings-hero p {
        margin: 0;
        color: var(--trem-textMuted);
        font-size: 8px;
      }
      .bookings-total {
        padding: 9px 12px;
        border-radius: 999px;
        background: var(--trem-surfaceMuted);
        color: var(--trem-textMuted);
        font-size: 10px;
        font-weight: 700;
      }
      .bookings-table {
        margin-top: 12px;
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 12px;
        background: white;
      }
      .bookings-toolbar {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
      }
      .bookings-toolbar h4 {
        margin: 0 0 2px;
        font-size: 12px;
      }
      .bookings-toolbar p {
        margin: 0;
        color: var(--trem-textMuted);
        font-size: 7px;
      }
      .bookings-controls {
        display: flex;
        gap: 6px;
      }
      .bookings-controls span {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 10px;
        border: 1px solid var(--trem-surfaceMuted);
        border-radius: 7px;
        background: var(--trem-surface);
        color: var(--trem-textMuted);
        font-size: 7px;
      }
      .bookings-controls .bookings-search::before {
        width: 7px;
        height: 7px;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        content: "";
      }
      .bookings-controls .bookings-search::after {
        position: absolute;
        left: 16px;
        width: 4px;
        height: 1.5px;
        background: currentColor;
        content: "";
        transform: rotate(45deg) translateY(4px);
        transform-origin: left center;
      }
      .bookings-controls .bookings-select {
        justify-content: space-between;
      }
      .bookings-controls .bookings-select::after {
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        content: "";
        transform: rotate(45deg) translateY(-2px);
      }
      .bookings-controls span:first-child {
        min-width: 210px;
      }
      .booking-row {
        display: grid;
        grid-template-columns: 0.8fr 1.8fr 0.7fr 1fr 0.55fr 1.2fr 0.7fr 0.8fr;
        gap: 8px;
        align-items: center;
        padding: 9px 11px;
        border-top: 1px solid var(--trem-surfaceMuted);
        font-size: 7px;
      }
      .booking-row--head {
        background: var(--trem-surfaceSubtle);
        color: var(--trem-textMuted);
        font-weight: 700;
      }
      .booking-tour b {
        display: block;
        font-size: 8px;
      }
      .booking-tour span {
        color: var(--trem-textMuted);
      }
      .booking-status {
        width: max-content;
        padding: 4px 7px;
        border: 1px solid var(--trem-dark-primary);
        border-radius: 999px;
        color: var(--trem-primary);
        font-weight: 700;
      }
      .demo-callout {
        position: absolute;
        right: 42px;
        bottom: 42px;
        max-width: 280px;
        padding: 17px;
        border-radius: 18px;
        background: color-mix(in srgb, var(--trem-dark-background) 94%, transparent);
        color: white;
        box-shadow: 0 22px 55px color-mix(in srgb, var(--trem-dark-background) 28%, transparent);
        backdrop-filter: blur(10px);
      }
      .demo-callout small {
        color: var(--trem-surfaceMuted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
      }
      .demo-callout strong {
        display: block;
        margin-top: 6px;
        font-size: 15px;
      }
      .demo-callout p {
        margin: 7px 0 0;
        color: var(--trem-surfaceMuted);
        font-size: 11px;
        line-height: 1.55;
      }

      /* journey */
      .journey-wrap {
        margin-top: 44px;
        position: relative;
      }
      .journey-line {
        position: absolute;
        left: 7%;
        right: 7%;
        top: 28px;
        height: 2px;
        background: linear-gradient(90deg, var(--trem-surfaceMuted), var(--trem-dark-primary), var(--trem-textMuted), var(--trem-surfaceMuted));
      }
      .journey-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
      }
      .journey-step {
        position: relative;
        padding-top: 0;
      }
      .journey-num {
        position: relative;
        z-index: 2;
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border: 7px solid var(--soft);
        border-radius: 50%;
        background: white;
        box-shadow: 0 0 0 1px var(--trem-surfaceMuted);
        color: var(--primary);
        font-size: 12px;
        font-weight: 700;
      }
      .journey-step h3 {
        margin: 18px 0 0;
        font-size: 16px;
      }
      .journey-step p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }

      /* Trevista */
      .trevista-card {
        margin-top: 44px;
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        min-height: 470px;
        border-radius: 32px;
        overflow: hidden;
        border: 1px solid var(--trem-surfaceMuted);
        background: linear-gradient(145deg, var(--trem-dark-surface), var(--trem-dark-surfaceMuted));
        color: white;
        box-shadow: var(--shadow-lg);
      }
      .trevista-copy {
        padding: 46px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .product-state {
        width: fit-content;
        padding: 7px 10px;
        border-radius: 999px;
        color: var(--trem-surfaceMuted);
        background: color-mix(in srgb, var(--trem-dark-primary) 16%, transparent);
        border: 1px solid color-mix(in srgb, var(--trem-surfaceMuted) 20%, transparent);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .trevista-copy h3 {
        margin: 20px 0 0;
        font-size: 48px;
        letter-spacing: -0.05em;
      }
      .trevista-copy p {
        margin: 15px 0 0;
        color: var(--trem-surfaceMuted);
        font-size: 16px;
        line-height: 1.7;
      }
      .trevista-list {
        display: grid;
        gap: 10px;
        margin: 24px 0 0;
      }
      .trevista-list span {
        display: flex;
        gap: 10px;
        color: var(--trem-surfaceMuted);
        font-size: 13px;
      }
      .trevista-list span::before {
        content: "✓";
        color: var(--trem-surfaceMuted);
        font-weight: 700;
      }
      .trevista-media {
        position: relative;
        padding: 28px 0 28px 28px;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .trevista-media::before {
        content: "";
        position: absolute;
        inset: 10% -10% 10% 20%;
        border-radius: 999px;
        background: color-mix(in srgb, var(--trem-textMuted) 22%, transparent);
        filter: blur(35px);
      }
      .trevista-media img {
        position: relative;
        width: 110%;
        max-width: none;
        border-radius: 24px 0 0 24px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 16%, transparent);
        box-shadow: -20px 28px 65px color-mix(in srgb, var(--trem-dark-background) 30%, transparent);
      }
      .trevista-media .platform-visual {
        width: calc(100% + 28px);
        min-height: 410px;
        border-radius: 24px 0 0 24px;
        box-shadow: -20px 28px 65px color-mix(in srgb, var(--trem-dark-background) 30%, transparent);
      }

      /* qualities */
      .quality-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-top: 44px;
      }
      .quality {
        padding: 25px;
        border-top: 2px solid var(--trem-surfaceMuted);
      }
      .quality span {
        color: var(--primary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
      }
      .quality h3 {
        margin: 18px 0 0;
        font-size: 19px;
      }
      .quality p {
        margin: 9px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
      }

      /* Partner */
      .partner-wrap {
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        gap: 48px;
        align-items: center;
      }
      .partner-copy h2 {
        max-width: 600px;
      }
      .partner-points {
        margin-top: 28px;
        display: grid;
        gap: 13px;
      }
      .partner-point {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 12px;
        align-items: start;
      }
      .partner-point i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: color-mix(in srgb, var(--trem-dark-primary) 14%, transparent);
        color: var(--trem-surfaceMuted);
        font-style: normal;
        font-weight: 700;
      }
      .partner-point strong {
        display: block;
        font-size: 14px;
      }
      .partner-point span {
        display: block;
        margin-top: 4px;
        color: var(--trem-surfaceMuted);
        font-size: 12px;
        line-height: 1.55;
      }
      .partner-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 30px;
      }
      .partner-product {
        position: relative;
        padding: 14px;
        border-radius: 28px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 12%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 5%, transparent);
        box-shadow: 0 36px 90px color-mix(in srgb, var(--trem-dark-background) 30%, transparent);
      }
      .partner-product img {
        width: 100%;
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 13%, transparent);
      }
      .partner-badge {
        position: absolute;
        top: -20px;
        right: 28px;
        padding: 12px 14px;
        border-radius: 14px;
        background: white;
        color: var(--ink);
        box-shadow: 0 18px 40px color-mix(in srgb, var(--trem-dark-background) 22%, transparent);
        font-size: 11px;
        font-weight: 700;
      }
      .partner-cap-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 48px;
      }
      .partner-cap {
        padding: 18px;
        border-radius: 16px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 10%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 4.5%, transparent);
      }
      .partner-cap strong {
        display: block;
        font-size: 13px;
      }
      .partner-cap span {
        display: block;
        margin-top: 6px;
        color: var(--trem-dark-primary);
        font-size: 11px;
        line-height: 1.5;
      }

      /* agency / leadership */
      .legacy-card {
        position: relative;
        min-height: 500px;
        overflow: hidden;
        padding: 46px;
        border-radius: 34px;
        color: white;
        background:
          radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--trem-dark-primary) 32%, transparent), transparent 31%),
          linear-gradient(135deg, var(--trem-dark-background) 8%, var(--trem-dark-background) 58%, var(--trem-primaryDark));
        box-shadow: 0 30px 75px color-mix(in srgb, var(--trem-dark-background) 20%, transparent);
      }
      .legacy-card::before {
        content: "";
        position: absolute;
        left: -110px;
        bottom: -230px;
        width: 430px;
        height: 430px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 13%, transparent);
        border-radius: 50%;
      }
      .legacy-stat {
        position: relative;
        z-index: 1;
        width: max-content;
        max-width: calc(100% - 110px);
        padding: 22px 26px;
        border: 1px solid color-mix(in srgb, var(--trem-surface) 20%, transparent);
        border-radius: 22px;
        background: color-mix(in srgb, var(--trem-surface) 8%, transparent);
        backdrop-filter: blur(12px);
      }
      .legacy-stat strong {
        display: block;
        font-size: 26px;
        line-height: 1;
        letter-spacing: -0.04em;
      }
      .legacy-stat span {
        display: block;
        margin-top: 7px;
        color: var(--trem-surfaceMuted);
        font-size: 12px;
      }
      .legacy-icon {
        position: absolute;
        z-index: 1;
        top: 46px;
        right: 46px;
        width: 72px;
        height: 72px;
        display: grid;
        place-items: center;
        border-radius: 22px;
        background: var(--trem-dark-warning);
        color: var(--trem-dark-background);
        font-size: 31px;
      }
      .legacy-copy {
        position: relative;
        z-index: 1;
        max-width: 880px;
        margin-top: 150px;
      }
      .legacy-copy .eyebrow {
        color: white;
      }
      .legacy-thread {
        margin-bottom: 18px;
        color: var(--trem-dark-primary);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.13em;
      }
      .legacy-copy h3 {
        margin: 0;
        max-width: 760px;
        font-size: clamp(36px, 5vw, 62px);
        line-height: 1.02;
        letter-spacing: -0.055em;
      }
      .legacy-copy p {
        max-width: 780px;
        margin: 20px 0 0;
        color: var(--trem-surfaceMuted);
        font-size: 15px;
        line-height: 1.7;
      }
      .leaders {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 30px;
      }
      .leader {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 20px;
      }
      .leader .avatar {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        color: white;
        background: linear-gradient(145deg, var(--primary), var(--primary-2));
        font-weight: 700;
      }
      .leader small {
        display: block;
        margin-top: 18px;
        color: var(--primary);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
      }
      .leader strong {
        display: block;
        margin-top: 6px;
      }
      .leader p {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
      }
      /* final CTA */
      .cta-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 14px;
      }
      .cta-card {
        min-height: 300px;
        padding: 38px;
        border-radius: 28px;
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .cta-card.traveller {
        color: white;
        background: linear-gradient(145deg, var(--trem-primaryDark), var(--trem-textMuted));
        border: 0;
      }
      .cta-card.partner {
        background: var(--trem-background);
      }
      .cta-card h3 {
        margin: 0;
        max-width: 500px;
        font-size: 34px;
        letter-spacing: -0.04em;
      }
      .cta-card p {
        margin: 12px 0 0;
        max-width: 530px;
        line-height: 1.65;
        font-size: 14px;
      }
      .cta-card.traveller p {
        color: var(--trem-surfaceMuted);
      }
      .cta-card.partner p {
        color: var(--muted);
      }

      /* Footer */
      .footer {
        padding: 52px 0 28px;
        background: var(--trem-dark-background);
        color: white;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.35fr 0.65fr 0.65fr;
        gap: 42px;
      }
      .footer-brand p {
        max-width: 430px;
        color: var(--trem-dark-primary);
        line-height: 1.65;
        font-size: 13px;
      }
      .footer h3 {
        margin: 0;
        font-size: 13px;
      }
      .footer-links {
        display: grid;
        gap: 10px;
        margin-top: 15px;
        color: var(--trem-dark-primary);
        font-size: 12px;
      }
      .footer-bottom {
        margin-top: 36px;
        padding-top: 20px;
        border-top: 1px solid color-mix(in srgb, var(--trem-surface) 10%, transparent);
        display: flex;
        justify-content: space-between;
        gap: 20px;
        color: var(--trem-textMuted);
        font-size: 11px;
      }

      /* reveal system */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(0px);
        transition:
          opacity 0.85s var(--ease-out),
          transform 0.85s var(--ease-out),
          filter 0.85s var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
      }
      .reveal[data-reveal="left"] {
        transform: translateX(-38px);
      }
      .reveal[data-reveal="right"] {
        transform: translateX(38px);
      }
      .reveal[data-reveal="zoom"] {
        transform: scale(0.93);
      }
      .reveal[data-reveal="blur"] {
        transform: translateY(16px);
        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);
      }

      @media (max-width: 1050px) {
        .nav-links {
          display: none;
        }
        .menu-btn {
          display: inline-flex;
        }
        .hero-grid,
        .partner-wrap,
        .trevista-card,
        .legacy-card {
          grid-template-columns: 1fr;
        }
        .hero-product {
          margin-top: 12px;
        }
        .floating-proof {
          left: 12px;
          bottom: 30px;
        }
        .promise-grid,
        .quality-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .feature-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .products-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .journey-grid {
          grid-template-columns: repeat(3, 1fr);
          row-gap: 30px;
        }
        .journey-line {
          display: none;
        }
        .partner-cap-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .trevista-media {
          padding: 0 26px 30px;
        }
        .trevista-media img {
          width: 100%;
          border-radius: 22px;
        }
        .trevista-media .platform-visual {
          width: 100%;
          border-radius: 22px;
        }
      }

      @media (max-width: 720px) {
        .container {
          width: min(100% - 28px, 1240px);
        }
        .section,
        .section.tight {
          padding: 52px 0;
        }
        .hero {
          padding: 56px 0 56px;
        }
        .hero-grid {
          gap: 38px;
        }
        .display {
          font-size: clamp(42px, 14vw, 64px);
        }
        .section-title {
          font-size: clamp(34px, 10vw, 48px);
        }
        .nav-actions .pill {
          display: none;
        }
        .promise-grid,
        .feature-grid,
        .quality-grid,
        .partner-cap-grid,
        .leaders,
        .cta-grid,
        .products-grid {
          grid-template-columns: 1fr;
        }
        .cta-card {
          min-height: auto;
          gap: 28px;
          padding: 30px;
        }
        .cta-card h3 {
          font-size: clamp(28px, 7vw, 36px);
          line-height: 1.08;
        }
        .promise {
          border-left: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .feature-card {
          min-height: 205px;
        }
        .demo-stage {
          min-height: auto;
          padding: 10px;
        }
        .demo-tabs {
          align-items: flex-start;
          flex-direction: column;
        }
        .demo-tabset {
          display: flex;
          width: 100%;
          overflow-x: auto;
          scroll-snap-type: x proximity;
          scrollbar-width: thin;
        }
        .demo-tab {
          flex: 0 0 auto;
          scroll-snap-align: start;
        }
        .demo-callout {
          position: static;
          max-width: none;
          margin-top: 10px;
        }
        .product-preview {
          height: auto;
          min-height: 480px;
        }
        .listing-chips {
          overflow: hidden;
        }
        .listing-search {
          grid-template-columns: auto 1fr;
        }
        .listing-search b {
          display: none;
        }
        .listing-cards {
          grid-template-columns: repeat(2, 1fr);
        }
        .listing-card:nth-child(n + 3) {
          display: none;
        }
        .bookings-controls span:first-child {
          min-width: 120px;
        }
        .booking-row {
          grid-template-columns: 0.9fr 2fr 0.7fr 0.8fr;
        }
        .booking-row > :nth-child(4),
        .booking-row > :nth-child(5),
        .booking-row > :nth-child(6),
        .booking-row > :nth-child(8) {
          display: none;
        }
        .tour-detail-facts {
          grid-template-columns: repeat(2, 1fr);
        }
        .tour-detail-highlight-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .tour-detail-highlight-grid div:nth-child(n + 3) {
          display: none;
        }
        .tour-booking-layout {
          grid-template-columns: 1fr;
        }
        .journey-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .trevista-copy {
          padding: 30px;
        }
        .trevista-copy h3 {
          font-size: 40px;
        }
        .partner-wrap {
          gap: 42px;
        }
        .legacy-card {
          min-height: 520px;
          padding: 24px;
        }
        .legacy-icon {
          top: 24px;
          right: 24px;
          width: 62px;
          height: 62px;
        }
        .legacy-stat {
          max-width: calc(100% - 78px);
          padding: 18px;
        }
        .legacy-copy {
          margin-top: 130px;
        }
        .legacy-thread {
          font-size: 10px;
          line-height: 1.7;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .footer-bottom {
          flex-direction: column;
        }
        .modal {
          padding: 30px 24px;
        }
        .modal__content h3 {
          font-size: 32px;
        }
        .floating-proof {
          display: none;
        }
        .platform-visual {
          min-height: 390px;
        }
        .platform-visual__body {
          grid-template-columns: 1fr;
          min-height: 334px;
        }
        .platform-visual__nav {
          display: none;
        }
        .platform-visual__main {
          padding: 18px;
        }
        .platform-visual__metrics {
          grid-template-columns: repeat(2, 1fr);
        }
        .platform-visual__metric:last-child {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .container {
          width: calc(100% - 24px);
        }
        .nav-wrap {
          min-height: 64px;
          gap: 12px;
        }
        .brand img {
          width: 38px;
          height: 38px;
        }
        .hero {
          padding: 44px 0;
        }
        .hero-actions .pill,
        .cta-card .pill {
          width: 100%;
        }
        .demo-tabset {
          width: 100%;
          overflow-x: auto;
        }
        .demo-tab {
          flex: 0 0 auto;
        }
        .listing-cards {
          grid-template-columns: 1fr;
        }
        .listing-card:nth-child(n + 2) {
          display: none;
        }
        .bookings-toolbar {
          align-items: stretch;
          flex-direction: column;
        }
        .bookings-controls {
          flex-wrap: wrap;
        }
        .bookings-controls span:first-child {
          flex: 1 0 100%;
          min-width: 0;
        }
        .tour-detail-facts,
        .tour-detail-highlight-grid,
        .tour-detail-packages {
          grid-template-columns: 1fr;
        }
        .modal-backdrop {
          padding: 14px;
        }
        .modal {
          padding: 26px 20px;
        }
        .cta-card {
          min-height: auto;
          padding: 26px;
        }
        .cta-card h3 {
          font-size: 30px;
        }
      }

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

      /* ============================================================
         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-primary) 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(--primary), var(--primary-2), var(--trem-textMuted));
        box-shadow: 0 1px 8px color-mix(in srgb, var(--trem-primary) 35%, transparent);
        transform: scaleX(0);
        transform-origin: left center;
        pointer-events: none;
      }

      /* soft cursor glow */
      .cursor-glow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--trem-dark-primaryDark) 8%, transparent),
          color-mix(in srgb, var(--trem-textMuted) 5%, transparent) 45%,
          transparent 70%
        );
        pointer-events: none;
        will-change: transform;
      }

      /* scroll parallax (uses translate, independent of transform) */
      [data-parallax] {
        translate: 0 var(--parallax-y, 0px);
        will-change: translate;
      }

      /* 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) 80%, transparent);
        box-shadow:
          0 1px 0 color-mix(in srgb, var(--trem-surfaceMuted) 60%, transparent),
          0 14px 38px color-mix(in srgb, var(--trem-accent) 6%, transparent);
      }
      .topbar.is-hidden {
        transform: translateY(-102%);
      }
      .topbar.is-scrolled .nav-wrap {
        min-height: 60px;
      }
      .mobile-nav {
        background: color-mix(in srgb, var(--trem-surface) 97%, transparent);
        backdrop-filter: blur(16px);
      }
      .menu-btn {
        transition:
          border-color 0.2s ease,
          background 0.2s ease;
      }
      .menu-btn:hover {
        border-color: var(--primary);
      }

      /* 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(--primary), var(--primary-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(64px);
        will-change: transform;
      }
      .hero-aurora .a {
        width: 540px;
        height: 540px;
        left: -160px;
        top: -180px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primaryDark) 34%, transparent), transparent 66%);
        animation: aurora-1 16s ease-in-out infinite alternate;
      }
      .hero-aurora .b {
        width: 640px;
        height: 640px;
        right: -200px;
        top: -140px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-dark-primary) 38%, transparent), transparent 66%);
        animation: aurora-2 19s ease-in-out infinite alternate;
      }
      .hero-aurora .c {
        width: 480px;
        height: 480px;
        left: 36%;
        bottom: -280px;
        background: radial-gradient(circle, color-mix(in srgb, var(--trem-primary) 26%, transparent), transparent 66%);
        animation: aurora-3 22s ease-in-out infinite alternate;
      }
      @keyframes aurora-1 {
        to {
          transform: translate3d(90px, 64px, 0) scale(1.14);
        }
      }
      @keyframes aurora-2 {
        to {
          transform: translate3d(-84px, 52px, 0) scale(1.16);
        }
      }
      @keyframes aurora-3 {
        to {
          transform: translate3d(64px, -54px, 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-primary) 30%, transparent);
        }
        50% {
          box-shadow: 0 0 0 7px color-mix(in srgb, var(--trem-primary) 0%, transparent);
        }
      }

      /* promise cells */
      .promise {
        transition:
          transform 0.35s var(--ease-out),
          background 0.35s ease,
          box-shadow 0.35s ease;
        position: relative;
      }
      .promise:hover {
        transform: translateY(-3px);
        background: var(--trem-surface);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trem-primary) 6%, transparent);
      }

      /* journey */
      .journey-num {
        transition:
          transform 0.35s var(--ease-spring),
          box-shadow 0.35s ease,
          background 0.35s ease;
      }
      .journey-step:hover .journey-num {
        transform: scale(1.12) rotate(-4deg);
        background: var(--blue-soft);
        box-shadow: 0 12px 30px color-mix(in srgb, var(--trem-primary) 24%, transparent);
      }
      .journey-step h3,
      .journey-step p {
        transition: transform 0.3s var(--ease-out);
      }
      .journey-step:hover h3 {
        transform: translateX(4px);
      }

      /* platform visual rows */
      .platform-visual__row {
        transition:
          background 0.25s ease,
          border-radius 0.25s ease,
          padding 0.25s ease;
        border-radius: 9px;
      }
      .platform-visual__row:hover {
        background: var(--trem-surfaceSubtle);
      }
      .platform-visual--dark .platform-visual__row:hover {
        background: color-mix(in srgb, var(--trem-surface) 8%, transparent);
      }

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

      /* trevista feature card */
      .trevista-card {
        position: relative;
        overflow: hidden;
      }
      .trevista-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
          115deg,
          transparent 32%,
          color-mix(in srgb, var(--trem-surface) 7%, transparent) 48%,
          transparent 64%
        );
        transform: translateX(-140%);
        pointer-events: none;
        animation: sheen 7.5s var(--ease-in-out) infinite;
      }
      .trevista-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--trem-surfaceMuted), transparent);
        transform: translateX(-100%);
        animation: sheen-top 5s ease-in-out infinite;
        opacity: 0.7;
      }
      @keyframes sheen {
        0%,
        40% {
          transform: translateX(-140%);
        }
        70%,
        100% {
          transform: translateX(140%);
        }
      }
      @keyframes sheen-top {
        0%,
        60% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }
      .trevista-media img {
        transition:
          transform 1.2s var(--ease-out),
          box-shadow 0.45s ease;
      }
      .trevista-card:hover .trevista-media img {
        transform: scale(1.05);
      }

      /* quality cards */
      .quality {
        transition:
          transform 0.35s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
        border-radius: 16px;
      }
      .quality:hover {
        transform: translateY(-4px);
        border-color: var(--trem-surfaceMuted);
        background: white;
        box-shadow: 0 18px 44px color-mix(in srgb, var(--trem-accent) 8%, transparent);
      }

      /* partner dark section */
      .partner-point i {
        transition:
          transform 0.35s var(--ease-spring),
          background 0.3s ease;
      }
      .partner-point:hover i {
        transform: scale(1.12) rotate(-6deg);
        background: color-mix(in srgb, var(--trem-dark-primary) 34%, transparent);
      }
      .partner-cap {
        transition:
          transform 0.35s var(--ease-out),
          border-color 0.3s ease,
          background 0.3s ease;
      }
      .partner-cap:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--trem-surface) 30%, transparent);
        background: color-mix(in srgb, var(--trem-surface) 9%, transparent);
      }
      .partner-badge {
        animation: float-soft 5s ease-in-out infinite;
      }
      @keyframes float-soft {
        50% {
          transform: translateY(-6px);
        }
      }

      /* 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 .avatar {
        transform: scale(1.1) rotate(-4deg);
        box-shadow: 0 12px 26px color-mix(in srgb, var(--trem-primary) 30%, transparent);
      }

      /* CTA cards */
      .cta-card {
        position: relative;
        overflow: hidden;
        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);
      }
      .cta-card.traveller {
        background: linear-gradient(145deg, var(--trem-primaryDark), var(--trem-textMuted), var(--trem-textMuted));
        background-size: 220% 220%;
        animation: gradient-flow 14s ease infinite;
      }

      /* footer link hover */
      .footer-links a {
        width: fit-content;
        position: relative;
        transition: color 0.25s ease, transform 0.3s var(--ease-out);
      }
      .footer-links a:hover {
        color: var(--trem-surfaceMuted);
        transform: translateX(3px);
      }

      /* 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(--primary);
        box-shadow: 0 20px 46px color-mix(in srgb, var(--trem-primary) 40%, transparent);
      }

      /* floating proof */
      .floating-proof {
        will-change: transform;
      }
      .floating-proof .mini-line::after {
        animation: meter-fill 2.6s var(--ease-out) 0.8s both;
      }
      @keyframes meter-fill {
        from {
          width: 0;
        }
      }

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

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