:root {
        --bg: #ffffff;
        --bg-subtle: #fafafa;
        --bg-dark: #000000;
        --fg: #000000;
        --fg-secondary: #666666;
        --fg-tertiary: #999999;
        --on-dark: #ffffff;
        --on-dark-secondary: #a1a1a1;
        --border: #eaeaea;
        --border-dark: #2e2e2e;
        --accent: #3ecf8e;
        --accent-hover: #2fb87a;
        --accent-soft: rgba(62, 207, 142, 0.1);
        --accent-soft-dark: rgba(62, 207, 142, 0.15);
        --radius: 12px;
        --radius-sm: 8px;
        --max-width: 1200px;
        --font-sans:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, monospace;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      html {
        overflow-x: hidden;
      }
      body {
        font-family: var(--font-sans);
        color: var(--fg);
        background: var(--bg);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        display: block;
        max-width: 100%;
      }
      button {
        font-family: inherit;
      }
      .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
      }
      @media (min-width: 768px) {
        .container {
          padding: 0 40px;
        }
      }

      /* ---------- Buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 20px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.15s ease;
        white-space: nowrap;
      }
      .btn-primary {
        background: var(--fg);
        color: var(--bg);
      }
      .btn-primary:hover {
        background: #333;
      }
      .btn-accent {
        background: var(--accent);
        color: #003022;
        position: relative;
        overflow: hidden;
      }
      .btn-accent:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
      }
      .btn-outline {
        background: transparent;
        color: var(--fg);
        border-color: var(--border);
      }
      .btn-outline:hover {
        border-color: var(--fg);
      }
      .btn-outline-dark {
        background: transparent;
        color: var(--on-dark);
        border-color: var(--border-dark);
      }
      .btn-outline-dark:hover {
        border-color: var(--on-dark-secondary);
      }
      .btn-lg {
        padding: 13px 26px;
        font-size: 15px;
      }

      /* ---------- Nav ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        height: 64px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid transparent;
        background: rgba(255, 255, 255, 0);
        transition:
          background 0.25s ease,
          border-color 0.25s ease,
          backdrop-filter 0.25s ease;
      }
      .nav.scrolled {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom-color: var(--border);
      }
      .nav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      @media (min-width: 768px) {
        .nav-inner {
          padding: 0 40px;
        }
      }
      .nav-left {
        display: flex;
        align-items: center;
        gap: 32px;
      }
      .nav-logo img {
        height: 20px;
        width: auto;
      }
      .nav-links {
        display: none;
        align-items: center;
        gap: 4px;
      }
      @media (min-width: 900px) {
        .nav-links {
          display: flex;
        }
      }
      .nav-link {
        position: relative;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--fg-secondary);
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition:
          color 0.15s ease,
          background 0.15s ease;
        background: none;
        border: none;
      }
      .nav-link:hover {
        color: var(--fg);
        background: var(--bg-subtle);
      }
      .nav-link svg {
        transition: transform 0.2s ease;
      }
      .nav-link.open svg {
        transform: rotate(180deg);
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nav-right .nav-link {
        display: none;
      }
      @media (min-width: 900px) {
        .nav-right .nav-link {
          display: flex;
        }
      }

      /* ---------- Mega menu ---------- */
      .mega-menu-wrap {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
      }
      .mega-menu {
        pointer-events: auto;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 24px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        padding: 26px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        transition:
          opacity 0.18s ease,
          transform 0.18s ease,
          visibility 0.18s;
      }
      @media (max-width: 1080px) {
        .mega-menu {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 900px) {
        .mega-menu {
          display: none;
        }
      }
      .nav-item.open .mega-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }
      .mega-col-title {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--fg-tertiary);
        text-transform: uppercase;
        margin-bottom: 8px;
        padding: 0 10px;
      }
      .mega-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 8px;
        transition: background 0.12s ease;
      }
      .mega-item:hover {
        background: var(--bg-subtle);
      }
      .mega-item-icon {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: var(--bg-subtle);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fg);
        margin-top: 1px;
      }
      .mega-item:hover .mega-item-icon {
        border-color: var(--accent);
        color: var(--accent-hover);
      }
      .mega-item-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .mega-item-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg);
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .mega-item-desc {
        font-size: 11.5px;
        color: var(--fg-secondary);
        line-height: 1.35;
      }
      .pro-tag {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--accent-hover);
        background: var(--accent-soft);
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.03em;
      }

      /* ---------- Mobile ---------- */
      .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
      }
      @media (min-width: 900px) {
        .mobile-toggle {
          display: none;
        }
      }
      .mobile-toggle .icon-close {
        display: none;
      }
      .mobile-toggle.open .icon-menu {
        display: none;
      }
      .mobile-toggle.open .icon-close {
        display: block;
      }
      .mobile-drawer {
        position: fixed;
        top: 64px;
        right: 0;
        left: 0;
        height: calc(100vh - 64px);
        background: var(--bg);
        z-index: 99;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
      }
      .mobile-drawer.open {
        transform: translateX(0);
      }
      @media (min-width: 900px) {
        .mobile-drawer {
          display: none;
        }
      }
      .mobile-drawer-inner {
        padding: 8px 24px 40px;
      }
      .mobile-link {
        display: block;
        padding: 16px 4px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
      }
      .mobile-accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 4px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        background: none;
        border-left: none;
        border-right: none;
        border-top: none;
        cursor: pointer;
        font-family: var(--font-sans);
        color: var(--fg);
      }
      .mobile-accordion-trigger svg {
        transition: transform 0.2s ease;
      }
      .mobile-accordion-trigger.open svg {
        transform: rotate(180deg);
      }
      .mobile-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
      }
      .mobile-accordion-panel.open {
        max-height: 800px;
      }
      .mobile-sub-group {
        padding: 12px 4px 4px 12px;
      }
      .mobile-sub-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--fg-tertiary);
        margin: 12px 0 8px;
      }
      .mobile-sub-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 4px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--fg-secondary);
      }
      .mobile-drawer-ctas {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
      }
      .mobile-drawer-ctas .btn {
        width: 100%;
      }

      /* ================= HERO ================= */
      .hero {
        position: relative;
        padding: 100px 0 60px;
        overflow: hidden;
      }
      .hero-bg-lines {
        position: absolute;
        inset: -10% -10% -10% -10%;
        z-index: -1;
        opacity: 0.55;
        background-image:
          linear-gradient(
            135deg,
            transparent 48.5%,
            var(--border) 48.5%,
            var(--border) 49.5%,
            transparent 49.5%
          ),
          linear-gradient(
            135deg,
            transparent 68.5%,
            var(--border) 68.5%,
            var(--border) 69.5%,
            transparent 69.5%
          );
        background-size: 100% 100%;
        mask-image: radial-gradient(
          ellipse 80% 60% at 50% 0%,
          black 40%,
          transparent 100%
        );
        will-change: transform;
      }
      .hero-inner {
        text-align: center;
        max-width: 820px;
        margin: 0 auto;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 100px;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 13px;
        font-weight: 500;
        color: var(--fg-secondary);
        margin-bottom: 28px;
      }
      .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .hero h1 {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.12;
        margin-bottom: 22px;
      }
      @media (min-width: 640px) {
        .hero h1 {
          font-size: 54px;
        }
      }
      @media (min-width: 900px) {
        .hero h1 {
          font-size: 64px;
        }
      }
      .accent-text {
        color: var(--accent-hover);
      }

      .hero p.subhead {
        font-size: 17px;
        color: var(--fg-secondary);
        max-width: 580px;
        margin: 0 auto 36px;
        line-height: 1.6;
      }
      @media (min-width: 640px) {
        .hero p.subhead {
          font-size: 19px;
        }
      }
      .hero-ctas {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 72px;
      }

      /* ---------- Hero network visual ---------- */
      .network-visual {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
      }
      .network-visual svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .net-line {
        stroke: var(--border);
        stroke-width: 1.5;
        fill: none;
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        transition:
          stroke-dashoffset 1.4s ease,
          stroke 0.6s ease;
      }
      .network-visual.in-view .net-line {
        stroke-dashoffset: 0;
      }
      .network-visual.in-view .net-line.accent-line {
        stroke: var(--accent);
      }
      .net-node {
        fill: var(--bg);
        stroke: var(--fg);
        stroke-width: 1.6;
      }
      .net-node.accent-node {
        stroke: var(--accent-hover);
      }
      .net-node-dot {
        fill: var(--fg-tertiary);
      }
      .net-node.accent-node + .net-node-dot,
      .accent-node-dot {
        fill: var(--accent);
      }
      .net-pulse {
        fill: var(--accent);
        opacity: 0;
      }
      .network-visual.in-view .net-pulse {
        animation: nodepulse 2.6s ease-in-out infinite;
      }
      .net-pulse.d1 {
        animation-delay: 0.2s !important;
      }
      .net-pulse.d2 {
        animation-delay: 0.9s !important;
      }
      .net-pulse.d3 {
        animation-delay: 1.6s !important;
      }
      .net-pulse.d4 {
        animation-delay: 0.5s !important;
      }
      @keyframes nodepulse {
        0% {
          opacity: 0;
          transform: scale(0.6);
        }
        30% {
          opacity: 0.5;
        }
        60% {
          opacity: 0;
          transform: scale(2.2);
        }
        100% {
          opacity: 0;
          transform: scale(2.2);
        }
      }
      .net-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        fill: var(--fg-secondary);
        opacity: 0;
        transition: opacity 0.6s ease 0.8s;
      }
      .network-visual.in-view .net-label {
        opacity: 1;
      }

      /* ---------- Stats ---------- */
      .trust-bar {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 36px 0;
      }
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        text-align: center;
      }
      @media (min-width: 720px) {
        .trust-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .trust-item .num {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-variant-numeric: tabular-nums;
      }
      .trust-item .label {
        font-size: 13px;
        color: var(--fg-secondary);
        margin-top: 4px;
      }

      /* ================= Sections ================= */
      .section {
        padding: 100px 0;
        scroll-margin-top: 80px;
      }
      .section-header {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 56px;
      }
      .eyebrow {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent-hover);
        margin-bottom: 14px;
        display: block;
      }
      .section-header h2 {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 14px;
      }
      @media (min-width: 720px) {
        .section-header h2 {
          font-size: 40px;
        }
      }
      .section-header p {
        font-size: 16px;
        color: var(--fg-secondary);
        line-height: 1.6;
      }

      /* ---------- Interactive product showcase ---------- */
      .showcase-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 48px;
      }
      .showcase-tab {
        position: relative;
        padding: 10px 18px;
        border-radius: 100px;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--fg-secondary);
        cursor: pointer;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .showcase-tab .tag-mini {
        font-family: var(--font-mono);
        font-size: 8.5px;
        color: var(--accent-hover);
        background: var(--accent-soft);
        padding: 1px 5px;
        border-radius: 3px;
      }
      .showcase-tab.active {
        color: var(--fg);
        border-color: var(--fg);
      }
      .showcase-tab .progress-fill {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0%;
        background: var(--accent);
      }
      .showcase-tab.active .progress-fill.animating {
        animation: fillProgress 5.5s linear forwards;
      }
      @keyframes fillProgress {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }

      .showcase-panel-wrap {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--bg-subtle);
      }
      .showcase-panel {
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
      }
      .showcase-panel.active {
        display: grid;
      }
      @media (min-width: 860px) {
        .showcase-panel.active {
          grid-template-columns: 1fr 1fr;
        }
      }
      .showcase-copy {
        padding: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .showcase-copy .cat-label {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--accent-hover);
        margin-bottom: 12px;
      }
      .showcase-copy h3 {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 14px;
      }
      .showcase-copy p {
        font-size: 15px;
        color: var(--fg-secondary);
        line-height: 1.65;
        margin-bottom: 24px;
      }
      .showcase-list {
        list-style: none;
      }
      .showcase-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--fg);
        padding: 9px 0;
        border-top: 1px solid var(--border);
      }
      .showcase-list li:first-child {
        border-top: none;
      }
      .showcase-list li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
      }
      .showcase-visual {
        background: var(--bg);
        border-left: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        min-height: 280px;
      }
      @media (max-width: 859px) {
        .showcase-visual {
          border-left: none;
          border-top: 1px solid var(--border);
        }
      }
      .showcase-visual svg {
        max-width: 100%;
      }

      /* ---------- Technology / infrastructure section ---------- */
      .tech-section {
        background: var(--bg-subtle);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .tech-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: center;
      }
      @media (min-width: 900px) {
        .tech-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .tech-copy .eyebrow {
        text-align: left;
      }
      .tech-copy h2 {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 18px;
        text-align: left;
      }
      @media (min-width: 720px) {
        .tech-copy h2 {
          font-size: 38px;
        }
      }
      .tech-copy > p {
        font-size: 15.5px;
        color: var(--fg-secondary);
        line-height: 1.65;
        margin-bottom: 28px;
      }
      .tech-points {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .tech-point {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .tech-point-icon {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--bg);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
      }
      .tech-point h4 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .tech-point p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.5;
      }
      .tech-diagram {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tech-diagram svg {
        width: 100%;
        max-width: 420px;
        height: auto;
      }

      /* ---------- Pro tier (dark) ---------- */
      .pro-section {
        background: var(--bg-dark);
        color: var(--on-dark);
        padding: 100px 0;
        position: relative;
        overflow: hidden;
      }
      .pro-glow {
        position: absolute;
        top: -20%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          var(--accent-soft-dark) 0%,
          transparent 70%
        );
        pointer-events: none;
        will-change: transform;
      }
      .pro-section .section-header p {
        color: var(--on-dark-secondary);
      }
      .pro-section .section-header h2 {
        color: var(--on-dark);
      }
      .pro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border-dark);
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;
      }
      @media (min-width: 860px) {
        .pro-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .pro-card {
        background: #0a0a0a;
        padding: 40px;
        position: relative;
        --mx: 50%;
        --my: 50%;
        display: flex;
        flex-direction: column;
      }
      .pro-card .pro-list {
        flex-grow: 1;
      }
      .pro-card .btn {
        align-self: flex-start;
        margin-top: auto;
      }
      .pro-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
          320px circle at var(--mx) var(--my),
          var(--accent-soft-dark),
          transparent 70%
        );
        pointer-events: none;
      }
      .pro-card:hover::before {
        opacity: 1;
      }
      .pro-card-tag {
        display: inline-flex;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--accent);
        background: var(--accent-soft-dark);
        padding: 4px 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        position: relative;
      }
      .pro-card h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
        position: relative;
      }
      .pro-card p.desc {
        font-size: 14.5px;
        color: var(--on-dark-secondary);
        line-height: 1.6;
        margin-bottom: 24px;
        position: relative;
      }
      .pro-list {
        list-style: none;
        margin-bottom: 28px;
        position: relative;
      }
      .pro-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #d4d4d4;
        padding: 8px 0;
        border-top: 1px solid var(--border-dark);
      }
      .pro-list li:first-child {
        border-top: none;
      }
      .pro-list li svg {
        color: var(--accent);
        flex-shrink: 0;
      }
      .pro-card .btn {
        position: relative;
      }

      /* ---------- Features (with cursor glow) ---------- */
      .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      @media (min-width: 780px) {
        .features-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .feature-item {
        text-align: left;
        background: var(--bg);
        padding: 36px 32px;
        position: relative;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
      }
      .feature-item::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
          260px circle at var(--mx) var(--my),
          var(--accent-soft),
          transparent 70%
        );
        pointer-events: none;
      }
      .feature-item:hover::before {
        opacity: 1;
      }
      .feature-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
        background: var(--accent-soft);
        border-radius: 10px;
        margin-bottom: 18px;
        position: relative;
      }
      .feature-item h3 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 8px;
        position: relative;
      }
      .feature-item p {
        font-size: 14.5px;
        color: var(--fg-secondary);
        line-height: 1.6;
        position: relative;
      }

      /* ---------- Closing CTA ---------- */
      .final-cta {
        text-align: center;
        padding: 110px 0;
        border-top: 1px solid var(--border);
        position: relative;
        overflow: hidden;
      }
      .final-cta h2 {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
      }
      @media (min-width: 720px) {
        .final-cta h2 {
          font-size: 44px;
        }
      }
      .final-cta p {
        font-size: 16px;
        color: var(--fg-secondary);
        margin-bottom: 36px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }
      .final-cta-ctas {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* ---------- Footer ---------- */
      footer {
        background: var(--bg-dark);
        color: var(--on-dark-secondary);
        padding: 64px 0 32px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin-bottom: 56px;
      }
      @media (min-width: 720px) {
        .footer-grid {
          grid-template-columns: 1.4fr repeat(4, 1fr);
        }
      }
      .footer-brand img {
        height: 22px;
        margin-bottom: 16px;
      }
      .footer-brand p {
        font-size: 13.5px;
        line-height: 1.6;
        max-width: 240px;
        color: var(--on-dark-secondary);
      }
      .footer-col h4 {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #777;
        margin-bottom: 16px;
      }
      .footer-col ul {
        list-style: none;
      }
      .footer-col li {
        margin-bottom: 11px;
      }
      .footer-col a {
        font-size: 13.5px;
        color: var(--on-dark-secondary);
        transition: color 0.15s ease;
      }
      .footer-col a:hover {
        color: var(--on-dark);
      }
      .footer-bottom {
        border-top: 1px solid var(--border-dark);
        padding-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
      }
      @media (min-width: 720px) {
        .footer-bottom {
          flex-direction: row;
          justify-content: space-between;
          text-align: left;
        }
      }
      .footer-bottom p {
        font-size: 13px;
        color: #666;
      }

      /* ---------- Utility ---------- */
      .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .stagger.visible .stagger-item {
        opacity: 1;
        transform: translateY(0);
      }
      .stagger-item {
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease;
      }

      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

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

      /* ================= Hero bento dashboard ================= */
      .hero-dashboard-wrap {
        max-width: 1000px;
        margin: 0 auto;
      }
      .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(128px, auto);
        gap: 14px;
      }
      @media (max-width: 780px) {
        .bento-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: minmax(120px, auto);
        }
      }
      .bento-item {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg);
        padding: 20px 22px 22px;
        position: relative;
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 0.35s ease,
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }
      .bento-grid.hovering .bento-item:not(.is-active) {
        opacity: 0.4;
        transform: scale(0.97);
      }
      .bento-item.is-active {
        transform: scale(1.04);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
        z-index: 2;
        border-color: var(--accent);
      }
      .b-span-2c2r {
        grid-column: span 2;
        grid-row: span 2;
      }
      .b-span-2c1r {
        grid-column: span 2;
        grid-row: span 1;
      }
      .b-span-1c1r {
        grid-column: span 1;
        grid-row: span 1;
      }
      @media (max-width: 780px) {
        .b-span-2c2r,
        .b-span-2c1r {
          grid-column: span 2;
        }
      }

      .bento-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--fg-tertiary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .bento-item.is-active .bento-label {
        color: var(--accent-hover);
      }
      .dash-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        padding: 4px 0;
        color: var(--fg);
      }
      .dash-row .stat {
        margin-left: auto;
        color: var(--fg-tertiary);
        font-size: 11px;
        font-family: var(--font-mono);
      }
      .dot-status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        box-shadow: 0 0 0 3px var(--accent-soft);
      }
      .bento-big-num {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .bento-sub {
        font-size: 11.5px;
        color: var(--fg-tertiary);
        margin-top: 2px;
      }
      .spark-row {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 26px;
        margin-top: 10px;
      }
      .spark-row span {
        flex: 1;
        background: var(--accent-soft);
        border-radius: 2px;
      }
      .spark-row span:last-child {
        background: var(--accent);
      }
      .ring-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ring-num {
        font-size: 20px;
        font-weight: 700;
      }

      /* ================= Interactive scale widget ================= */
      .scale-widget {
        border: 1px dashed var(--border);
        border-radius: 12px;
        padding: 24px 28px;
        margin-top: 28px;
        background: var(--bg);
      }
      .scale-widget-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .scale-widget-top .label {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg-secondary);
      }
      .scale-widget-top .value {
        font-family: var(--font-mono);
        font-size: 15px;
        font-weight: 600;
        color: var(--accent-hover);
      }
      .scale-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 4px;
        background: var(--border);
        outline: none;
        margin-bottom: 8px;
      }
      .scale-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        border: 3px solid var(--bg);
        box-shadow: 0 0 0 1px var(--accent);
        cursor: grab;
      }
      .scale-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        border: 3px solid var(--bg);
        box-shadow: 0 0 0 1px var(--accent);
        cursor: grab;
        border: none;
      }
      .scale-hint {
        font-size: 12px;
        color: var(--fg-tertiary);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .scale-bar-track {
        height: 10px;
        background: var(--bg-subtle);
        border-radius: 6px;
        overflow: hidden;
        margin-top: 14px;
        border: 1px solid var(--border);
      }
      .scale-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-soft), var(--accent));
        border-radius: 6px;
        transition: width 0.15s ease;
      }

      /* ================= AI & Automation flow diagram ================= */
      .flow-diagram-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .flow-diagram-mobile {
        display: none;
      }
      @media (max-width: 640px) {
        .flow-diagram-desktop {
          display: none;
        }
        .flow-diagram-mobile {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
          width: 100%;
          max-width: 320px;
          margin: 0 auto;
        }
        .flow-mobile-node {
          width: 100%;
          border: 1px solid var(--border-dark);
          background: #0f0f0f;
          border-radius: 10px;
          padding: 14px 18px;
          text-align: center;
        }
        .flow-mobile-node.accent {
          border-color: var(--accent);
        }
        .flow-mobile-node .t {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          color: var(--on-dark-secondary);
          text-transform: uppercase;
        }
        .flow-mobile-node.accent .t {
          color: var(--accent);
        }
        .flow-mobile-node .s {
          font-family: var(--font-mono);
          font-size: 9px;
          color: var(--on-dark-secondary);
          margin-top: 2px;
        }
        .flow-mobile-connector {
          height: 28px;
          width: 1.5px;
          background: var(--border-dark);
          position: relative;
        }
        .flow-mobile-connector .dot {
          position: absolute;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--accent);
          left: 50%;
          transform: translateX(-50%);
          animation: flowdown 2.2s infinite linear;
        }
        @keyframes flowdown {
          0% {
            top: -5px;
            opacity: 0;
          }
          15% {
            opacity: 1;
          }
          85% {
            opacity: 1;
          }
          100% {
            top: 100%;
            opacity: 0;
          }
        }
      }
      .flow-node-label {
        font-family: var(--font-mono);
        font-size: 10px;
        fill: var(--on-dark-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .flow-path {
        stroke: var(--border-dark);
        stroke-width: 1.5;
        fill: none;
      }
      .flow-node-box {
        fill: #0f0f0f;
        stroke: var(--border-dark);
        stroke-width: 1.4;
      }
      .flow-node-box.accent {
        stroke: var(--accent);
      }
      .flow-dot {
        fill: var(--accent);
      }

      /* ================= What's Next tab card ================= */
      .whats-next-panel {
        padding: 56px 48px;
        text-align: center;
      }
      .whats-next-panel .icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: var(--accent-soft);
        color: var(--accent-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
      }
      .whats-next-panel h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .whats-next-panel p {
        font-size: 14.5px;
        color: var(--fg-secondary);
        max-width: 440px;
        margin: 0 auto 20px;
        line-height: 1.6;
      }

      /* ================= Big analytics dashboard (Kinsta-style) ================= */
      .analytics-mockup {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .analytics-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        border-bottom: 1px solid var(--border);
      }
      .analytics-topbar .dots {
        display: flex;
        gap: 6px;
      }
      .analytics-topbar .dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border);
      }
      .analytics-topbar .title {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--fg-tertiary);
      }
      .analytics-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
      }
      @media (min-width: 900px) {
        .analytics-body {
          grid-template-columns: 2fr 1fr;
        }
      }
      .analytics-main {
        background: var(--bg);
        padding: 32px;
      }
      .analytics-side {
        background: var(--bg);
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: var(--border);
      }
      .analytics-side-item {
        background: var(--bg);
        padding: 24px 28px;
      }
      .chart-legend {
        display: flex;
        gap: 18px;
        margin-bottom: 18px;
      }
      .chart-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: var(--fg-secondary);
      }
      .chart-legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .area-line {
        fill: none;
        stroke-width: 2;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        transition: stroke-dashoffset 1.8s ease;
      }
      .analytics-mockup.in-view .area-line {
        stroke-dashoffset: 0;
      }
      .area-fill {
        opacity: 0;
        transition: opacity 1s ease 0.6s;
      }
      .analytics-mockup.in-view .area-fill {
        opacity: 1;
      }
      .bw-bar {
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .analytics-mockup.in-view .bw-bar {
        transform: scaleY(1);
      }
      .analytics-stat-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .analytics-stat-row .l {
        font-size: 12.5px;
        color: var(--fg-secondary);
      }
      .analytics-stat-row .v {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fg);
      }

      .cursor-tilt {
        transition: transform 0.15s ease-out;
      }

      .hero-chart-line {
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        transition: stroke-dashoffset 1.6s ease 0.3s;
      }
      .hero-dashboard-wrap.visible .hero-chart-line {
        stroke-dashoffset: 0;
      }
      .hero-dashboard-wrap.visible .hero-chart-line.accent {
        transition-delay: 0.6s;
      }

      /* ================= Platform: stacked window selector ================= */
      .platform-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: stretch;
      }
      @media (min-width: 940px) {
        .platform-grid {
          grid-template-columns: 0.85fr 1.15fr;
          gap: 28px;
        }
      }

      .window-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: space-between;
      }
      .window-card {
        text-align: left;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 16px 18px;
        cursor: pointer;
        width: 100%;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease,
          background 0.25s ease;
        font-family: inherit;
      }
      .window-card:hover {
        border-color: var(--fg-tertiary);
      }
      .window-card.active {
        border-color: var(--fg);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      }
      .window-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
      }
      .window-card-icon {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fg-secondary);
        transition:
          color 0.25s ease,
          border-color 0.25s ease,
          background 0.25s ease;
      }
      .window-card-icon svg {
        width: 14px;
        height: 14px;
      }
      .window-card.active .window-card-icon {
        color: var(--accent-hover);
        border-color: var(--accent);
        background: var(--accent-soft);
      }
      .window-card-num {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--fg-tertiary);
      }
      .window-card h3 {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
      }
      .window-card p {
        font-size: 12.5px;
        color: var(--fg-secondary);
        line-height: 1.45;
        margin: 0;
      }

      .platform-visual-pane {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg-subtle);
        padding: 18px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
      }
      .platform-visual-graphic {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 80px;
        max-height: 110px;
      }
      .platform-visual-copy h4 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      .platform-visual-copy p {
        font-size: 12.5px;
        color: var(--fg-secondary);
        line-height: 1.45;
      }
      .platform-panel-content {
        display: none;
      }
      .platform-panel-content.active {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .platform-detail-list {
        list-style: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
      }
      .platform-detail-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--fg-secondary);
        padding: 4px 0;
      }
      .platform-detail-list li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
        width: 13px;
        height: 13px;
      }

      /* ---------- Recommender tool ---------- */
      .recommender {
        margin-top: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 14px 16px;
      }
      .recommender-head {
        margin-bottom: 8px;
      }
      .recommender-head h4 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 0;
      }
      .recommender-head p {
        display: none;
      }
      .rec-slider-row {
        margin-bottom: 8px;
      }
      .rec-slider-row:last-of-type {
        margin-bottom: 0;
      }
      .rec-slider-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .rec-slider-top .l {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fg-secondary);
      }
      .rec-slider-top .v {
        font-family: var(--font-mono);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--accent-hover);
      }
      .rec-result {
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: 10px;
        background: var(--accent-soft);
        border: 1px solid var(--accent);
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .rec-result-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--bg);
        border: 1px solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
        flex-shrink: 0;
      }
      .rec-result-text .label {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--accent-hover);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
      }
      .rec-result-text .name {
        font-size: 15px;
        font-weight: 700;
      }
      .rec-result-text .reason {
        font-size: 12px;
        color: var(--fg-secondary);
        margin-top: 1px;
      }

      /* ---------- AI use-case grid ---------- */
      .usecase-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border-dark);
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        margin-top: 48px;
        margin-bottom: 48px;
      }
      @media (min-width: 700px) {
        .usecase-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 1000px) {
        .usecase-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .usecase-card {
        background: #0a0a0a;
        padding: 28px 26px;
      }
      .usecase-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--accent-soft-dark);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }
      .usecase-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--on-dark);
        margin-bottom: 8px;
      }
      .usecase-card p {
        font-size: 13px;
        color: var(--on-dark-secondary);
        line-height: 1.6;
      }

      /* ---------- Region cards ---------- */
      .region-visual {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 0;
      }
      .region-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg);
        padding: 18px 22px;
        max-width: 280px;
      }
      .region-card.offset {
        margin-left: auto;
      }
      .region-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        font-weight: 600;
      }
      .region-card-sub {
        font-size: 12.5px;
        color: var(--fg-tertiary);
        margin-top: 4px;
        margin-left: 16px;
      }

      /* ---------- Code mockup ---------- */
      .code-mockup {
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        background: #0a0a0a;
      }
      .code-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border-dark);
      }
      .code-topbar .dots {
        display: flex;
        gap: 6px;
      }
      .code-topbar .dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border-dark);
      }
      .code-filename {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--on-dark-secondary);
      }
      .code-body {
        padding: 24px;
        overflow-x: auto;
      }
      .code-body pre {
        margin: 0;
      }
      .code-body code {
        font-family: var(--font-mono);
        font-size: 12.5px;
        line-height: 1.8;
        color: #d4d4d4;
        white-space: pre;
      }
      .code-comment {
        color: #6b7280;
      }
      .code-cmd {
        color: var(--accent);
      }
      .code-str {
        color: #f5c26b;
      }
      .code-out {
        color: #7dd3fc;
      }

      /* ---------- Visibility extras ---------- */
      .visibility-extra {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px;
      }
      @media (min-width: 860px) {
        .visibility-extra {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .visibility-extra-card {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 22px 24px;
      }
      .region-bar-row {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        color: var(--fg-secondary);
        margin-top: 12px;
      }
      .region-bar-row span:first-child {
        width: 56px;
        flex-shrink: 0;
      }
      .region-bar-track {
        flex: 1;
        height: 6px;
        border-radius: 4px;
        background: var(--bg-subtle);
        overflow: hidden;
      }
      .region-bar-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 4px;
      }
      .region-bar-pct {
        font-family: var(--font-mono);
        font-size: 11px;
        width: 32px;
        text-align: right;
        flex-shrink: 0;
      }

      /* ---------- Getting started steps ---------- */
      .steps-row {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      @media (min-width: 900px) {
        .steps-row {
          flex-direction: row;
          align-items: flex-start;
        }
      }
      .step-card {
        flex: 1;
        text-align: left;
        padding: 8px 0;
      }
      @media (min-width: 900px) {
        .step-card {
          padding: 0 8px;
        }
      }
      .step-num {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--accent-hover);
        margin-bottom: 12px;
      }
      .step-card h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .step-card p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.6;
      }
      .step-connector {
        width: 1px;
        height: 24px;
        background: var(--border);
        margin: 4px 0 4px 0;
      }
      @media (min-width: 900px) {
        .step-connector {
          width: auto;
          height: 1px;
          flex: 0 0 32px;
          margin-top: 8px;
        }
      }

      /* ---------- FAQ accordion ---------- */
      .faq-list {
        max-width: 760px;
        margin: 0 auto;
        border-top: 1px solid var(--border);
      }
      .faq-item {
        border-bottom: 1px solid var(--border);
      }
      .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 4px;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
        font-size: 15.5px;
        font-weight: 600;
        color: var(--fg);
      }
      .faq-question svg {
        flex-shrink: 0;
        transition: transform 0.25s ease;
        color: var(--fg-tertiary);
      }
      .faq-question.open svg {
        transform: rotate(180deg);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .faq-answer.open {
        max-height: 200px;
      }
      .faq-answer p {
        font-size: 14px;
        color: var(--fg-secondary);
        line-height: 1.65;
        padding: 0 4px 22px;
      }

      /* ===== Product page styles (merged) ===== */
      :root {
        --bg: #ffffff;
        --bg-subtle: #fafafa;
        --bg-dark: #000000;
        --fg: #000000;
        --fg-secondary: #666666;
        --fg-tertiary: #999999;
        --on-dark: #ffffff;
        --on-dark-secondary: #a1a1a1;
        --border: #eaeaea;
        --border-dark: #2e2e2e;
        --accent: #3ecf8e;
        --accent-hover: #2fb87a;
        --accent-soft: rgba(62, 207, 142, 0.1);
        --accent-soft-dark: rgba(62, 207, 142, 0.15);
        --radius: 12px;
        --radius-sm: 8px;
        --max-width: 1200px;
        --font-sans:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, monospace;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      html {
        overflow-x: hidden;
      }
      body {
        font-family: var(--font-sans);
        color: var(--fg);
        background: var(--bg);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        display: block;
        max-width: 100%;
      }
      button {
        font-family: inherit;
      }
      .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
      }
      @media (min-width: 768px) {
        .container {
          padding: 0 40px;
        }
      }

      /* ---------- Buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 20px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.15s ease;
        white-space: nowrap;
      }
      .btn-primary {
        background: var(--fg);
        color: var(--bg);
      }
      .btn-primary:hover {
        background: #333;
      }
      .btn-accent {
        background: var(--accent);
        color: #003022;
        position: relative;
        overflow: hidden;
      }
      .btn-accent:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
      }
      .btn-outline {
        background: transparent;
        color: var(--fg);
        border-color: var(--border);
      }
      .btn-outline:hover {
        border-color: var(--fg);
      }
      .btn-outline-dark {
        background: transparent;
        color: var(--on-dark);
        border-color: var(--border-dark);
      }
      .btn-outline-dark:hover {
        border-color: var(--on-dark-secondary);
      }
      .btn-lg {
        padding: 13px 26px;
        font-size: 15px;
      }

      /* ---------- Nav ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        height: 64px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid transparent;
        background: rgba(255, 255, 255, 0);
        transition:
          background 0.25s ease,
          border-color 0.25s ease,
          backdrop-filter 0.25s ease;
      }
      .nav.scrolled {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom-color: var(--border);
      }
      .nav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      @media (min-width: 768px) {
        .nav-inner {
          padding: 0 40px;
        }
      }
      .nav-left {
        display: flex;
        align-items: center;
        gap: 32px;
      }
      .nav-logo img {
        height: 20px;
        width: auto;
      }
      .nav-links {
        display: none;
        align-items: center;
        gap: 4px;
      }
      @media (min-width: 900px) {
        .nav-links {
          display: flex;
        }
      }
      .nav-link {
        position: relative;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--fg-secondary);
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition:
          color 0.15s ease,
          background 0.15s ease;
        background: none;
        border: none;
      }
      .nav-link:hover {
        color: var(--fg);
        background: var(--bg-subtle);
      }
      .nav-link svg {
        transition: transform 0.2s ease;
      }
      .nav-link.open svg {
        transform: rotate(180deg);
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nav-right .nav-link {
        display: none;
      }
      @media (min-width: 900px) {
        .nav-right .nav-link {
          display: flex;
        }
      }

      /* ---------- Mega menu ---------- */
      .mega-menu-wrap {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
      }
      .mega-menu {
        pointer-events: auto;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 24px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        padding: 26px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        transition:
          opacity 0.18s ease,
          transform 0.18s ease,
          visibility 0.18s;
      }
      @media (max-width: 1080px) {
        .mega-menu {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 900px) {
        .mega-menu {
          display: none;
        }
      }
      .nav-item.open .mega-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }
      .mega-col-title {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--fg-tertiary);
        text-transform: uppercase;
        margin-bottom: 8px;
        padding: 0 10px;
      }
      .mega-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 8px;
        transition: background 0.12s ease;
      }
      .mega-item:hover {
        background: var(--bg-subtle);
      }
      .mega-item-icon {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: var(--bg-subtle);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fg);
        margin-top: 1px;
      }
      .mega-item:hover .mega-item-icon {
        border-color: var(--accent);
        color: var(--accent-hover);
      }
      .mega-item-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .mega-item-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg);
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .mega-item-desc {
        font-size: 11.5px;
        color: var(--fg-secondary);
        line-height: 1.35;
      }
      .pro-tag {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--accent-hover);
        background: var(--accent-soft);
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.03em;
      }

      /* ---------- Mobile ---------- */
      .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
      }
      @media (min-width: 900px) {
        .mobile-toggle {
          display: none;
        }
      }
      .mobile-toggle .icon-close {
        display: none;
      }
      .mobile-toggle.open .icon-menu {
        display: none;
      }
      .mobile-toggle.open .icon-close {
        display: block;
      }
      .mobile-drawer {
        position: fixed;
        top: 64px;
        right: 0;
        left: 0;
        height: calc(100vh - 64px);
        background: var(--bg);
        z-index: 99;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
      }
      .mobile-drawer.open {
        transform: translateX(0);
      }
      @media (min-width: 900px) {
        .mobile-drawer {
          display: none;
        }
      }
      .mobile-drawer-inner {
        padding: 8px 24px 40px;
      }
      .mobile-link {
        display: block;
        padding: 16px 4px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
      }
      .mobile-accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 4px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        background: none;
        border-left: none;
        border-right: none;
        border-top: none;
        cursor: pointer;
        font-family: var(--font-sans);
        color: var(--fg);
      }
      .mobile-accordion-trigger svg {
        transition: transform 0.2s ease;
      }
      .mobile-accordion-trigger.open svg {
        transform: rotate(180deg);
      }
      .mobile-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
      }
      .mobile-accordion-panel.open {
        max-height: 800px;
      }
      .mobile-sub-group {
        padding: 12px 4px 4px 12px;
      }
      .mobile-sub-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--fg-tertiary);
        margin: 12px 0 8px;
      }
      .mobile-sub-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 4px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--fg-secondary);
      }
      .mobile-drawer-ctas {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
      }
      .mobile-drawer-ctas .btn {
        width: 100%;
      }

      /* ================= HERO ================= */
      .hero {
        position: relative;
        padding: 100px 0 60px;
        overflow: hidden;
      }
      .hero-bg-lines {
        position: absolute;
        inset: -10% -10% -10% -10%;
        z-index: -1;
        opacity: 0.55;
        background-image:
          linear-gradient(
            135deg,
            transparent 48.5%,
            var(--border) 48.5%,
            var(--border) 49.5%,
            transparent 49.5%
          ),
          linear-gradient(
            135deg,
            transparent 68.5%,
            var(--border) 68.5%,
            var(--border) 69.5%,
            transparent 69.5%
          );
        background-size: 100% 100%;
        mask-image: radial-gradient(
          ellipse 80% 60% at 50% 0%,
          black 40%,
          transparent 100%
        );
        will-change: transform;
      }
      .hero-inner {
        text-align: center;
        max-width: 820px;
        margin: 0 auto;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 100px;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 13px;
        font-weight: 500;
        color: var(--fg-secondary);
        margin-bottom: 28px;
      }
      .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .hero h1 {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.12;
        margin-bottom: 22px;
      }
      @media (min-width: 640px) {
        .hero h1 {
          font-size: 54px;
        }
      }
      @media (min-width: 900px) {
        .hero h1 {
          font-size: 64px;
        }
      }
      .accent-text {
        color: var(--accent-hover);
      }

      .hero p.subhead {
        font-size: 17px;
        color: var(--fg-secondary);
        max-width: 580px;
        margin: 0 auto 36px;
        line-height: 1.6;
      }
      @media (min-width: 640px) {
        .hero p.subhead {
          font-size: 19px;
        }
      }
      .hero-ctas {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 72px;
      }

      /* ---------- Hero network visual ---------- */
      .network-visual {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
      }
      .network-visual svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .net-line {
        stroke: var(--border);
        stroke-width: 1.5;
        fill: none;
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        transition:
          stroke-dashoffset 1.4s ease,
          stroke 0.6s ease;
      }
      .network-visual.in-view .net-line {
        stroke-dashoffset: 0;
      }
      .network-visual.in-view .net-line.accent-line {
        stroke: var(--accent);
      }
      .net-node {
        fill: var(--bg);
        stroke: var(--fg);
        stroke-width: 1.6;
      }
      .net-node.accent-node {
        stroke: var(--accent-hover);
      }
      .net-node-dot {
        fill: var(--fg-tertiary);
      }
      .net-node.accent-node + .net-node-dot,
      .accent-node-dot {
        fill: var(--accent);
      }
      .net-pulse {
        fill: var(--accent);
        opacity: 0;
      }
      .network-visual.in-view .net-pulse {
        animation: nodepulse 2.6s ease-in-out infinite;
      }
      .net-pulse.d1 {
        animation-delay: 0.2s !important;
      }
      .net-pulse.d2 {
        animation-delay: 0.9s !important;
      }
      .net-pulse.d3 {
        animation-delay: 1.6s !important;
      }
      .net-pulse.d4 {
        animation-delay: 0.5s !important;
      }
      @keyframes nodepulse {
        0% {
          opacity: 0;
          transform: scale(0.6);
        }
        30% {
          opacity: 0.5;
        }
        60% {
          opacity: 0;
          transform: scale(2.2);
        }
        100% {
          opacity: 0;
          transform: scale(2.2);
        }
      }
      .net-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        fill: var(--fg-secondary);
        opacity: 0;
        transition: opacity 0.6s ease 0.8s;
      }
      .network-visual.in-view .net-label {
        opacity: 1;
      }

      /* ---------- Stats ---------- */
      .trust-bar {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 36px 0;
      }
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        text-align: center;
      }
      @media (min-width: 720px) {
        .trust-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .trust-item .num {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-variant-numeric: tabular-nums;
      }
      .trust-item .label {
        font-size: 13px;
        color: var(--fg-secondary);
        margin-top: 4px;
      }

      /* ================= Sections ================= */
      .section {
        padding: 100px 0;
        scroll-margin-top: 80px;
      }
      .section-header {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 56px;
      }
      .eyebrow {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent-hover);
        margin-bottom: 14px;
        display: block;
      }
      .section-header h2 {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 14px;
      }
      @media (min-width: 720px) {
        .section-header h2 {
          font-size: 40px;
        }
      }
      .section-header p {
        font-size: 16px;
        color: var(--fg-secondary);
        line-height: 1.6;
      }

      /* ---------- Interactive product showcase ---------- */
      .showcase-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 48px;
      }
      .showcase-tab {
        position: relative;
        padding: 10px 18px;
        border-radius: 100px;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--fg-secondary);
        cursor: pointer;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .showcase-tab .tag-mini {
        font-family: var(--font-mono);
        font-size: 8.5px;
        color: var(--accent-hover);
        background: var(--accent-soft);
        padding: 1px 5px;
        border-radius: 3px;
      }
      .showcase-tab.active {
        color: var(--fg);
        border-color: var(--fg);
      }
      .showcase-tab .progress-fill {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0%;
        background: var(--accent);
      }
      .showcase-tab.active .progress-fill.animating {
        animation: fillProgress 5.5s linear forwards;
      }
      @keyframes fillProgress {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }

      .showcase-panel-wrap {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--bg-subtle);
      }
      .showcase-panel {
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
      }
      .showcase-panel.active {
        display: grid;
      }
      @media (min-width: 860px) {
        .showcase-panel.active {
          grid-template-columns: 1fr 1fr;
        }
      }
      .showcase-copy {
        padding: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .showcase-copy .cat-label {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--accent-hover);
        margin-bottom: 12px;
      }
      .showcase-copy h3 {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 14px;
      }
      .showcase-copy p {
        font-size: 15px;
        color: var(--fg-secondary);
        line-height: 1.65;
        margin-bottom: 24px;
      }
      .showcase-list {
        list-style: none;
      }
      .showcase-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--fg);
        padding: 9px 0;
        border-top: 1px solid var(--border);
      }
      .showcase-list li:first-child {
        border-top: none;
      }
      .showcase-list li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
      }
      .showcase-visual {
        background: var(--bg);
        border-left: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        min-height: 280px;
      }
      @media (max-width: 859px) {
        .showcase-visual {
          border-left: none;
          border-top: 1px solid var(--border);
        }
      }
      .showcase-visual svg {
        max-width: 100%;
      }

      /* ---------- Technology / infrastructure section ---------- */
      .tech-section {
        background: var(--bg-subtle);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .tech-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: center;
      }
      @media (min-width: 900px) {
        .tech-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .tech-copy .eyebrow {
        text-align: left;
      }
      .tech-copy h2 {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 18px;
        text-align: left;
      }
      @media (min-width: 720px) {
        .tech-copy h2 {
          font-size: 38px;
        }
      }
      .tech-copy > p {
        font-size: 15.5px;
        color: var(--fg-secondary);
        line-height: 1.65;
        margin-bottom: 28px;
      }
      .tech-points {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .tech-point {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .tech-point-icon {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--bg);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
      }
      .tech-point h4 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .tech-point p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.5;
      }
      .tech-diagram {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tech-diagram svg {
        width: 100%;
        max-width: 420px;
        height: auto;
      }

      /* ---------- Pro tier (dark) ---------- */
      .pro-section {
        background: var(--bg-dark);
        color: var(--on-dark);
        padding: 100px 0;
        position: relative;
        overflow: hidden;
      }
      .pro-glow {
        position: absolute;
        top: -20%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          var(--accent-soft-dark) 0%,
          transparent 70%
        );
        pointer-events: none;
        will-change: transform;
      }
      .pro-section .section-header p {
        color: var(--on-dark-secondary);
      }
      .pro-section .section-header h2 {
        color: var(--on-dark);
      }
      .pro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border-dark);
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;
      }
      @media (min-width: 860px) {
        .pro-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .pro-card {
        background: #0a0a0a;
        padding: 40px;
        position: relative;
        --mx: 50%;
        --my: 50%;
        display: flex;
        flex-direction: column;
      }
      .pro-card .pro-list {
        flex-grow: 1;
      }
      .pro-card .btn {
        align-self: flex-start;
        margin-top: auto;
      }
      .pro-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
          320px circle at var(--mx) var(--my),
          var(--accent-soft-dark),
          transparent 70%
        );
        pointer-events: none;
      }
      .pro-card:hover::before {
        opacity: 1;
      }
      .pro-card-tag {
        display: inline-flex;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--accent);
        background: var(--accent-soft-dark);
        padding: 4px 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        position: relative;
      }
      .pro-card h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
        position: relative;
      }
      .pro-card p.desc {
        font-size: 14.5px;
        color: var(--on-dark-secondary);
        line-height: 1.6;
        margin-bottom: 24px;
        position: relative;
      }
      .pro-list {
        list-style: none;
        margin-bottom: 28px;
        position: relative;
      }
      .pro-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #d4d4d4;
        padding: 8px 0;
        border-top: 1px solid var(--border-dark);
      }
      .pro-list li:first-child {
        border-top: none;
      }
      .pro-list li svg {
        color: var(--accent);
        flex-shrink: 0;
      }
      .pro-card .btn {
        position: relative;
      }

      /* ---------- Features (with cursor glow) ---------- */
      .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      @media (min-width: 780px) {
        .features-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .feature-item {
        text-align: left;
        background: var(--bg);
        padding: 36px 32px;
        position: relative;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
      }
      .feature-item::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
          260px circle at var(--mx) var(--my),
          var(--accent-soft),
          transparent 70%
        );
        pointer-events: none;
      }
      .feature-item:hover::before {
        opacity: 1;
      }
      .feature-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
        background: var(--accent-soft);
        border-radius: 10px;
        margin-bottom: 18px;
        position: relative;
      }
      .feature-item h3 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 8px;
        position: relative;
      }
      .feature-item p {
        font-size: 14.5px;
        color: var(--fg-secondary);
        line-height: 1.6;
        position: relative;
      }

      /* ---------- Closing CTA ---------- */
      .final-cta {
        text-align: center;
        padding: 110px 0;
        border-top: 1px solid var(--border);
        position: relative;
        overflow: hidden;
      }
      .final-cta h2 {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
      }
      @media (min-width: 720px) {
        .final-cta h2 {
          font-size: 44px;
        }
      }
      .final-cta p {
        font-size: 16px;
        color: var(--fg-secondary);
        margin-bottom: 36px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }
      .final-cta-ctas {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* ---------- Footer ---------- */
      footer {
        background: var(--bg-dark);
        color: var(--on-dark-secondary);
        padding: 64px 0 32px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin-bottom: 56px;
      }
      @media (min-width: 720px) {
        .footer-grid {
          grid-template-columns: 1.4fr repeat(4, 1fr);
        }
      }
      .footer-brand img {
        height: 22px;
        margin-bottom: 16px;
      }
      .footer-brand p {
        font-size: 13.5px;
        line-height: 1.6;
        max-width: 240px;
        color: var(--on-dark-secondary);
      }
      .footer-col h4 {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #777;
        margin-bottom: 16px;
      }
      .footer-col ul {
        list-style: none;
      }
      .footer-col li {
        margin-bottom: 11px;
      }
      .footer-col a {
        font-size: 13.5px;
        color: var(--on-dark-secondary);
        transition: color 0.15s ease;
      }
      .footer-col a:hover {
        color: var(--on-dark);
      }
      .footer-bottom {
        border-top: 1px solid var(--border-dark);
        padding-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
      }
      @media (min-width: 720px) {
        .footer-bottom {
          flex-direction: row;
          justify-content: space-between;
          text-align: left;
        }
      }
      .footer-bottom p {
        font-size: 13px;
        color: #666;
      }

      /* ---------- Utility ---------- */
      .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .stagger.visible .stagger-item {
        opacity: 1;
        transform: translateY(0);
      }
      .stagger-item {
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease;
      }

      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

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

      /* ================= Hero bento dashboard ================= */
      .hero-dashboard-wrap {
        max-width: 1000px;
        margin: 0 auto;
      }
      .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(128px, auto);
        gap: 14px;
      }
      @media (max-width: 780px) {
        .bento-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: minmax(120px, auto);
        }
      }
      .bento-item {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg);
        padding: 20px 22px 22px;
        position: relative;
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 0.35s ease,
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }
      .bento-grid.hovering .bento-item:not(.is-active) {
        opacity: 0.4;
        transform: scale(0.97);
      }
      .bento-item.is-active {
        transform: scale(1.04);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
        z-index: 2;
        border-color: var(--accent);
      }
      .b-span-2c2r {
        grid-column: span 2;
        grid-row: span 2;
      }
      .b-span-2c1r {
        grid-column: span 2;
        grid-row: span 1;
      }
      .b-span-1c1r {
        grid-column: span 1;
        grid-row: span 1;
      }
      @media (max-width: 780px) {
        .b-span-2c2r,
        .b-span-2c1r {
          grid-column: span 2;
        }
      }

      .bento-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--fg-tertiary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .bento-item.is-active .bento-label {
        color: var(--accent-hover);
      }
      .dash-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        padding: 4px 0;
        color: var(--fg);
      }
      .dash-row .stat {
        margin-left: auto;
        color: var(--fg-tertiary);
        font-size: 11px;
        font-family: var(--font-mono);
      }
      .dot-status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        box-shadow: 0 0 0 3px var(--accent-soft);
      }
      .bento-big-num {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .bento-sub {
        font-size: 11.5px;
        color: var(--fg-tertiary);
        margin-top: 2px;
      }
      .spark-row {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 26px;
        margin-top: 10px;
      }
      .spark-row span {
        flex: 1;
        background: var(--accent-soft);
        border-radius: 2px;
      }
      .spark-row span:last-child {
        background: var(--accent);
      }
      .ring-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ring-num {
        font-size: 20px;
        font-weight: 700;
      }

      /* ================= Interactive scale widget ================= */
      .scale-widget {
        border: 1px dashed var(--border);
        border-radius: 12px;
        padding: 24px 28px;
        margin-top: 28px;
        background: var(--bg);
      }
      .scale-widget-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .scale-widget-top .label {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg-secondary);
      }
      .scale-widget-top .value {
        font-family: var(--font-mono);
        font-size: 15px;
        font-weight: 600;
        color: var(--accent-hover);
      }
      .scale-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 4px;
        background: var(--border);
        outline: none;
        margin-bottom: 8px;
      }
      .scale-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        border: 3px solid var(--bg);
        box-shadow: 0 0 0 1px var(--accent);
        cursor: grab;
      }
      .scale-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        border: 3px solid var(--bg);
        box-shadow: 0 0 0 1px var(--accent);
        cursor: grab;
        border: none;
      }
      .scale-hint {
        font-size: 12px;
        color: var(--fg-tertiary);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .scale-bar-track {
        height: 10px;
        background: var(--bg-subtle);
        border-radius: 6px;
        overflow: hidden;
        margin-top: 14px;
        border: 1px solid var(--border);
      }
      .scale-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-soft), var(--accent));
        border-radius: 6px;
        transition: width 0.15s ease;
      }

      /* ================= AI & Automation flow diagram ================= */
      .flow-diagram-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .flow-diagram-mobile {
        display: none;
      }
      @media (max-width: 640px) {
        .flow-diagram-desktop {
          display: none;
        }
        .flow-diagram-mobile {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
          width: 100%;
          max-width: 320px;
          margin: 0 auto;
        }
        .flow-mobile-node {
          width: 100%;
          border: 1px solid var(--border-dark);
          background: #0f0f0f;
          border-radius: 10px;
          padding: 14px 18px;
          text-align: center;
        }
        .flow-mobile-node.accent {
          border-color: var(--accent);
        }
        .flow-mobile-node .t {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          color: var(--on-dark-secondary);
          text-transform: uppercase;
        }
        .flow-mobile-node.accent .t {
          color: var(--accent);
        }
        .flow-mobile-node .s {
          font-family: var(--font-mono);
          font-size: 9px;
          color: var(--on-dark-secondary);
          margin-top: 2px;
        }
        .flow-mobile-connector {
          height: 28px;
          width: 1.5px;
          background: var(--border-dark);
          position: relative;
        }
        .flow-mobile-connector .dot {
          position: absolute;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--accent);
          left: 50%;
          transform: translateX(-50%);
          animation: flowdown 2.2s infinite linear;
        }
        @keyframes flowdown {
          0% {
            top: -5px;
            opacity: 0;
          }
          15% {
            opacity: 1;
          }
          85% {
            opacity: 1;
          }
          100% {
            top: 100%;
            opacity: 0;
          }
        }
      }
      .flow-node-label {
        font-family: var(--font-mono);
        font-size: 10px;
        fill: var(--on-dark-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .flow-path {
        stroke: var(--border-dark);
        stroke-width: 1.5;
        fill: none;
      }
      .flow-node-box {
        fill: #0f0f0f;
        stroke: var(--border-dark);
        stroke-width: 1.4;
      }
      .flow-node-box.accent {
        stroke: var(--accent);
      }
      .flow-dot {
        fill: var(--accent);
      }

      /* ================= What's Next tab card ================= */
      .whats-next-panel {
        padding: 56px 48px;
        text-align: center;
      }
      .whats-next-panel .icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: var(--accent-soft);
        color: var(--accent-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
      }
      .whats-next-panel h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .whats-next-panel p {
        font-size: 14.5px;
        color: var(--fg-secondary);
        max-width: 440px;
        margin: 0 auto 20px;
        line-height: 1.6;
      }

      /* ================= Big analytics dashboard (Kinsta-style) ================= */
      .analytics-mockup {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .analytics-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        border-bottom: 1px solid var(--border);
      }
      .analytics-topbar .dots {
        display: flex;
        gap: 6px;
      }
      .analytics-topbar .dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border);
      }
      .analytics-topbar .title {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--fg-tertiary);
      }
      .analytics-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
      }
      @media (min-width: 900px) {
        .analytics-body {
          grid-template-columns: 2fr 1fr;
        }
      }
      .analytics-main {
        background: var(--bg);
        padding: 32px;
      }
      .analytics-side {
        background: var(--bg);
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: var(--border);
      }
      .analytics-side-item {
        background: var(--bg);
        padding: 24px 28px;
      }
      .chart-legend {
        display: flex;
        gap: 18px;
        margin-bottom: 18px;
      }
      .chart-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: var(--fg-secondary);
      }
      .chart-legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .area-line {
        fill: none;
        stroke-width: 2;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        transition: stroke-dashoffset 1.8s ease;
      }
      .analytics-mockup.in-view .area-line {
        stroke-dashoffset: 0;
      }
      .area-fill {
        opacity: 0;
        transition: opacity 1s ease 0.6s;
      }
      .analytics-mockup.in-view .area-fill {
        opacity: 1;
      }
      .bw-bar {
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .analytics-mockup.in-view .bw-bar {
        transform: scaleY(1);
      }
      .analytics-stat-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .analytics-stat-row .l {
        font-size: 12.5px;
        color: var(--fg-secondary);
      }
      .analytics-stat-row .v {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fg);
      }

      .cursor-tilt {
        transition: transform 0.15s ease-out;
      }

      .hero-chart-line {
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        transition: stroke-dashoffset 1.6s ease 0.3s;
      }
      .hero-dashboard-wrap.visible .hero-chart-line {
        stroke-dashoffset: 0;
      }
      .hero-dashboard-wrap.visible .hero-chart-line.accent {
        transition-delay: 0.6s;
      }

      /* ================= Platform: stacked window selector ================= */
      .platform-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: stretch;
      }
      @media (min-width: 940px) {
        .platform-grid {
          grid-template-columns: 0.85fr 1.15fr;
          gap: 28px;
        }
      }

      .window-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
        justify-content: space-between;
      }
      .window-card {
        text-align: left;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 26px 28px;
        cursor: pointer;
        width: 100%;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease,
          background 0.25s ease;
        font-family: inherit;
      }
      .window-card:hover {
        border-color: var(--fg-tertiary);
      }
      .window-card.active {
        border-color: var(--fg);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      }
      .window-card-top {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 10px;
      }
      .window-card-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fg-secondary);
        transition:
          color 0.25s ease,
          border-color 0.25s ease,
          background 0.25s ease;
      }
      .window-card.active .window-card-icon {
        color: var(--accent-hover);
        border-color: var(--accent);
        background: var(--accent-soft);
      }
      .window-card-num {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--fg-tertiary);
      }
      .window-card h3 {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
      }
      .window-card p {
        font-size: 14px;
        color: var(--fg-secondary);
        line-height: 1.6;
        margin: 0;
      }

      .platform-visual-pane {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg-subtle);
        padding: 26px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
      }
      .platform-visual-graphic {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 130px;
      }
      .platform-visual-copy h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 6px;
      }
      .platform-visual-copy p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.55;
      }
      .platform-panel-content {
        display: none;
      }
      .platform-panel-content.active {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .platform-detail-list {
        list-style: none;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
      }
      .platform-detail-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--fg-secondary);
        padding: 6px 0;
      }
      .platform-detail-list li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
      }

      /* ---------- Recommender tool ---------- */
      .recommender {
        margin-top: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 20px 22px;
      }
      .recommender-head {
        margin-bottom: 14px;
      }
      .recommender-head h4 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .recommender-head p {
        font-size: 12.5px;
        color: var(--fg-secondary);
      }
      .rec-slider-row {
        margin-bottom: 14px;
      }
      .rec-slider-row:last-of-type {
        margin-bottom: 0;
      }
      .rec-slider-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .rec-slider-top .l {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fg-secondary);
      }
      .rec-slider-top .v {
        font-family: var(--font-mono);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--accent-hover);
      }
      .rec-result {
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: 10px;
        background: var(--accent-soft);
        border: 1px solid var(--accent);
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .rec-result-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--bg);
        border: 1px solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-hover);
        flex-shrink: 0;
      }
      .rec-result-text .label {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--accent-hover);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
      }
      .rec-result-text .name {
        font-size: 15px;
        font-weight: 700;
      }
      .rec-result-text .reason {
        font-size: 12px;
        color: var(--fg-secondary);
        margin-top: 1px;
      }

      /* ---------- AI use-case grid ---------- */
      .usecase-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border-dark);
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        margin-top: 48px;
        margin-bottom: 48px;
      }
      @media (min-width: 700px) {
        .usecase-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 1000px) {
        .usecase-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .usecase-card {
        background: #0a0a0a;
        padding: 28px 26px;
      }
      .usecase-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--accent-soft-dark);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }
      .usecase-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--on-dark);
        margin-bottom: 8px;
      }
      .usecase-card p {
        font-size: 13px;
        color: var(--on-dark-secondary);
        line-height: 1.6;
      }

      /* ---------- Region cards ---------- */
      .region-visual {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 0;
      }
      .region-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg);
        padding: 18px 22px;
        max-width: 280px;
      }
      .region-card.offset {
        margin-left: auto;
      }
      .region-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        font-weight: 600;
      }
      .region-card-sub {
        font-size: 12.5px;
        color: var(--fg-tertiary);
        margin-top: 4px;
        margin-left: 16px;
      }

      /* ---------- Code mockup ---------- */
      .code-mockup {
        border: 1px solid var(--border-dark);
        border-radius: var(--radius);
        overflow: hidden;
        background: #0a0a0a;
      }
      .code-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border-dark);
      }
      .code-topbar .dots {
        display: flex;
        gap: 6px;
      }
      .code-topbar .dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border-dark);
      }
      .code-filename {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--on-dark-secondary);
      }
      .code-body {
        padding: 24px;
        overflow-x: auto;
      }
      .code-body pre {
        margin: 0;
      }
      .code-body code {
        font-family: var(--font-mono);
        font-size: 12.5px;
        line-height: 1.8;
        color: #d4d4d4;
        white-space: pre;
      }
      .code-comment {
        color: #6b7280;
      }
      .code-cmd {
        color: var(--accent);
      }
      .code-str {
        color: #f5c26b;
      }
      .code-out {
        color: #7dd3fc;
      }

      /* ---------- Visibility extras ---------- */
      .visibility-extra {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px;
      }
      @media (min-width: 860px) {
        .visibility-extra {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .visibility-extra-card {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        padding: 22px 24px;
      }
      .region-bar-row {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        color: var(--fg-secondary);
        margin-top: 12px;
      }
      .region-bar-row span:first-child {
        width: 56px;
        flex-shrink: 0;
      }
      .region-bar-track {
        flex: 1;
        height: 6px;
        border-radius: 4px;
        background: var(--bg-subtle);
        overflow: hidden;
      }
      .region-bar-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 4px;
      }
      .region-bar-pct {
        font-family: var(--font-mono);
        font-size: 11px;
        width: 32px;
        text-align: right;
        flex-shrink: 0;
      }

      /* ---------- Getting started steps ---------- */
      .steps-row {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      @media (min-width: 900px) {
        .steps-row {
          flex-direction: row;
          align-items: flex-start;
        }
      }
      .step-card {
        flex: 1;
        text-align: left;
        padding: 8px 0;
      }
      @media (min-width: 900px) {
        .step-card {
          padding: 0 8px;
        }
      }
      .step-num {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--accent-hover);
        margin-bottom: 12px;
      }
      .step-card h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .step-card p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.6;
      }
      .step-connector {
        width: 1px;
        height: 24px;
        background: var(--border);
        margin: 4px 0 4px 0;
      }
      @media (min-width: 900px) {
        .step-connector {
          width: auto;
          height: 1px;
          flex: 0 0 32px;
          margin-top: 8px;
        }
      }

      /* ---------- FAQ accordion ---------- */
      .faq-list {
        max-width: 760px;
        margin: 0 auto;
        border-top: 1px solid var(--border);
      }
      .faq-item {
        border-bottom: 1px solid var(--border);
      }
      .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 4px;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
        font-size: 15.5px;
        font-weight: 600;
        color: var(--fg);
      }
      .faq-question svg {
        flex-shrink: 0;
        transition: transform 0.25s ease;
        color: var(--fg-tertiary);
      }
      .faq-question.open svg {
        transform: rotate(180deg);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .faq-answer.open {
        max-height: 200px;
      }
      .faq-answer p {
        font-size: 14px;
        color: var(--fg-secondary);
        line-height: 1.65;
        padding: 0 4px 22px;
      }
      /* ================= Product page: sticky sub-nav ================= */
      .subnav {
        position: sticky;
        top: 64px;
        z-index: 90;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid transparent;
        transition:
          background 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .subnav.shaded {
        background: rgba(255, 255, 255, 0.92);
        border-bottom-color: var(--border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
      }
      .subnav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .subnav-inner::-webkit-scrollbar {
        display: none;
      }
      @media (min-width: 768px) {
        .subnav-inner {
          padding: 0 40px;
        }
      }
      .subnav a {
        padding: 16px 14px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--fg-secondary);
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition:
          color 0.15s ease,
          border-color 0.15s ease;
      }
      .subnav a:hover {
        color: var(--fg);
      }
      .subnav a.active {
        color: var(--fg);
        border-bottom-color: var(--accent);
      }

      /* ================= Product hero ================= */
      .product-hero {
        padding: 64px 0 56px;
        position: relative;
        overflow: hidden;
      }
      .product-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: center;
      }
      @media (min-width: 960px) {
        .product-hero-grid {
          grid-template-columns: 1.1fr 0.9fr;
        }
      }
      .product-hero h1 {
        font-size: 36px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.12;
        margin-bottom: 18px;
      }
      @media (min-width: 640px) {
        .product-hero h1 {
          font-size: 46px;
        }
      }
      .product-hero p.subhead {
        font-size: 16px;
        color: var(--fg-secondary);
        line-height: 1.6;
        margin-bottom: 28px;
        max-width: 480px;
      }
      .product-hero-ctas {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .product-hero-visual {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ================= Product content sections ================= */
      .product-section {
        padding: 88px 0;
        scroll-margin-top: 120px;
      }
      .product-section-header {
        max-width: 640px;
        margin: 0 auto 48px;
        text-align: center;
      }

      .spec-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      @media (min-width: 640px) {
        .spec-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 980px) {
        .spec-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .spec-card {
        background: var(--bg);
        padding: 30px;
      }
      .spec-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        color: var(--fg);
      }
      .spec-card h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .spec-card p {
        font-size: 13.5px;
        color: var(--fg-secondary);
        line-height: 1.6;
      }

      /* ================= Pricing tables ================= */
      .term-toggle {
        display: inline-flex;
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 100px;
        background: var(--bg-subtle);
        margin: 0 auto 44px;
      }
      .term-toggle-wrap {
        text-align: center;
      }
      .term-toggle-btn {
        padding: 8px 18px;
        border-radius: 100px;
        font-size: 13px;
        font-weight: 600;
        color: var(--fg-secondary);
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .term-toggle-btn.active {
        background: var(--bg);
        color: var(--fg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }
      .term-toggle-btn .save-tag {
        color: var(--accent-hover);
        font-size: 11px;
        margin-left: 4px;
      }

      .pricing-grid-full {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 780px) {
        .pricing-grid-full {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .price-card-full {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 32px;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .price-card-full.featured {
        border-color: var(--fg);
      }
      .price-card-full .featured-tag {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--fg);
        color: var(--bg);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding: 4px 12px;
        border-radius: 100px;
      }
      .price-card-full h3 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 6px;
      }
      .price-card-full .tagline {
        font-size: 13px;
        color: var(--fg-secondary);
        margin-bottom: 20px;
      }
      .price-amount-full {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 4px;
      }
      .price-amount-full .num {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .price-amount-full .period {
        font-size: 13px;
        color: var(--fg-secondary);
      }
      .price-billed-full {
        font-size: 12px;
        color: var(--fg-tertiary);
        margin-bottom: 24px;
      }
      .price-card-full .btn {
        width: 100%;
        margin-bottom: 24px;
      }
      .price-features-full {
        list-style: none;
        flex-grow: 1;
      }
      .price-features-full li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13.5px;
        color: var(--fg-secondary);
        padding: 7px 0;
        line-height: 1.4;
      }
      .price-features-full li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
        margin-top: 2px;
      }

      /* Tiered spec pricing (VPS/Cloud/GPU/n8n style — multiple size tiers) */
      .tier-table {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      .tier-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 28px;
        border-bottom: 1px solid var(--border);
        align-items: center;
      }
      .tier-row:last-child {
        border-bottom: none;
      }
      @media (min-width: 780px) {
        .tier-row {
          grid-template-columns: 2fr 1fr auto;
        }
      }
      .tier-row:hover {
        background: var(--bg-subtle);
      }
      .tier-specs {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .tier-specs-detail {
        font-size: 12.5px;
        color: var(--fg-tertiary);
      }
      .tier-price {
        text-align: left;
      }
      @media (min-width: 780px) {
        .tier-price {
          text-align: right;
        }
      }
      .tier-price .num {
        font-size: 22px;
        font-weight: 700;
      }
      .tier-price .period {
        font-size: 12px;
        color: var(--fg-secondary);
      }
      .tier-price .billed {
        font-size: 11.5px;
        color: var(--fg-tertiary);
      }
      .tier-row .btn {
        white-space: nowrap;
      }

      /* GPU hourly pricing table */
      .gpu-table-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 28px;
        border-bottom: 1px solid var(--border);
        align-items: center;
      }
      .gpu-table-row:last-child {
        border-bottom: none;
      }
      @media (min-width: 700px) {
        .gpu-table-row {
          grid-template-columns: 2fr 1fr 1fr auto;
        }
      }
      .gpu-table-row:hover {
        background: var(--bg-subtle);
      }
      .gpu-name {
        font-size: 14px;
        font-weight: 700;
      }
      .gpu-specs {
        font-size: 12px;
        color: var(--fg-tertiary);
      }
      .gpu-rate .num {
        font-size: 18px;
        font-weight: 700;
      }
      .gpu-rate .unit {
        font-size: 12px;
        color: var(--fg-secondary);
      }
      .gpu-est {
        font-size: 12.5px;
        color: var(--fg-secondary);
      }

      /* Addon services strip */
      .addon-strip {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      @media (min-width: 700px) {
        .addon-strip {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 1000px) {
        .addon-strip {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .addon-item {
        background: var(--bg);
        padding: 24px 26px;
      }
      .addon-item h4 {
        font-size: 14.5px;
        font-weight: 700;
        margin-bottom: 6px;
      }
      .addon-item p {
        font-size: 13px;
        color: var(--fg-secondary);
        line-height: 1.55;
        margin-bottom: 10px;
      }
      .addon-item .contact {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--accent-hover);
      }

      /* ================= Simple flat-price cards (SSL / Security add-ons) ================= */
      .flat-price-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      @media (min-width: 700px) {
        .flat-price-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .flat-price-card {
        background: var(--bg);
        padding: 28px;
        display: flex;
        flex-direction: column;
      }
      .flat-price-card h3 {
        font-size: 15.5px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .flat-price-card p {
        font-size: 13px;
        color: var(--fg-secondary);
        line-height: 1.55;
        margin-bottom: 18px;
        flex-grow: 1;
      }
      .flat-price-card .price {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
      }
      .flat-price-card .price .price-unit {
        font-size: 13px;
        font-weight: 500;
        color: var(--fg-secondary);
      }
      .flat-price-card .btn {
        width: 100%;
      }
      .subsection-label {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--fg-tertiary);
        margin: 48px 0 20px;
      }
      .subsection-label:first-child {
        margin-top: 0;
      }

      /* ================= Services page ================= */
      .service-block {
        border-top: 1px solid var(--border);
        padding: 56px 0;
        scroll-margin-top: 120px;
      }
      .service-block:first-child {
        border-top: none;
      }
      .service-block > h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .service-block > .service-desc {
        font-size: 15px;
        color: var(--fg-secondary);
        line-height: 1.65;
        margin-bottom: 28px;
        max-width: 640px;
      }
      .service-block-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
      }
      @media (min-width: 900px) {
        .service-block-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .service-includes {
        list-style: none;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .service-includes li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: var(--fg-secondary);
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
        flex: 1;
      }
      .service-includes li:last-child {
        border-bottom: none;
      }
      .service-includes li svg {
        color: var(--accent-hover);
        flex-shrink: 0;
      }
      .service-cta-box {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg-subtle);
        padding: 28px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .service-cta-box .label {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--fg-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
      }
      .service-cta-box .price {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .service-cta-box p {
        font-size: 13px;
        color: var(--fg-secondary);
        margin-bottom: 18px;
      }

      /* ================= Signup form page ================= */
      .signup-wrap {
        max-width: 460px;
        margin: 0 auto;
        padding: 72px 24px 96px;
      }
      .signup-wrap .eyebrow {
        text-align: center;
        display: block;
      }
      .signup-wrap h1 {
        font-size: 32px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 10px;
        letter-spacing: -0.02em;
      }
      .signup-wrap > p {
        text-align: center;
        color: var(--fg-secondary);
        font-size: 14.5px;
        margin-bottom: 36px;
      }
      .form-group {
        margin-bottom: 18px;
      }
      .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 7px;
      }
      .form-group input,
      .form-group select {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-family: inherit;
        background: var(--bg);
        color: var(--fg);
      }
      .form-group input:focus,
      .form-group select:focus {
        outline: none;
        border-color: var(--accent);
      }
      .signup-submit {
        width: 100%;
        margin-top: 8px;
      }
      .signup-legal {
        font-size: 12px;
        color: var(--fg-tertiary);
        text-align: center;
        margin-top: 16px;
        line-height: 1.5;
      }
      .signup-success {
        display: none;
        text-align: center;
        padding: 40px 24px;
      }
      .signup-success.active {
        display: block;
      }
      .signup-success .icon-wrap {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
      }
      .signup-success h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .signup-success p {
        color: var(--fg-secondary);
        font-size: 14.5px;
      }

      /* ================= Compare Plans page ================= */
      .compare-table-wrap {
        overflow-x: auto;
      }
      .compare-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 760px;
      }
      .compare-table th,
      .compare-table td {
        padding: 16px 18px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        font-size: 13.5px;
      }
      .compare-table th {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--fg-tertiary);
        font-weight: 600;
        background: var(--bg-subtle);
      }
      .compare-table th:first-child,
      .compare-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg);
        font-weight: 600;
      }
      .compare-table th:first-child {
        background: var(--bg-subtle);
      }
      .compare-table td.price-cell {
        font-size: 16px;
        font-weight: 700;
      }
      .compare-table .row-cta {
        padding: 12px 10px;
      }

      /* ================= Contact / Support form ================= */
      .contact-wrap {
        max-width: 560px;
        margin: 0 auto;
        padding: 72px 24px 96px;
      }
      .contact-wrap .eyebrow {
        text-align: center;
        display: block;
      }
      .contact-wrap h1 {
        font-size: 32px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 10px;
        letter-spacing: -0.02em;
      }
      .contact-wrap > p {
        text-align: center;
        color: var(--fg-secondary);
        font-size: 14.5px;
        margin-bottom: 36px;
      }
      .contact-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      @media (min-width: 560px) {
        .contact-row.two-col {
          grid-template-columns: 1fr 1fr;
        }
      }
      .form-group textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-family: inherit;
        background: var(--bg);
        color: var(--fg);
        resize: vertical;
        min-height: 120px;
      }
      .form-group textarea:focus {
        outline: none;
        border-color: var(--accent);
      }
      .dynamic-field-group {
        display: none;
      }
      .dynamic-field-group.active {
        display: block;
      }
      .contact-success {
        display: none;
        text-align: center;
        padding: 40px 24px;
      }
      .contact-success.active {
        display: block;
      }

      /* ================= Cart drawer ================= */
      .cart-nav-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
        color: var(--fg);
      }
      .cart-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: var(--accent);
        color: #003022;
        font-size: 10px;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        font-family: var(--font-mono);
      }
      .cart-badge.show {
        display: flex;
      }
      .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.25s ease,
          visibility 0.25s ease;
      }
      .cart-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        max-width: 420px;
        background: var(--bg);
        z-index: 200;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
      }
      .cart-drawer.open {
        transform: translateX(0);
      }
      .cart-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
      }
      .cart-drawer-header h3 {
        font-size: 16px;
        font-weight: 700;
      }
      .cart-drawer-close {
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fg-secondary);
      }
      .cart-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 24px;
      }
      .cart-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--fg-tertiary);
        font-size: 14px;
      }
      .cart-line {
        display: flex;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
      }
      .cart-line-info {
        flex: 1;
      }
      .cart-line-info .plan {
        font-size: 14px;
        font-weight: 700;
      }
      .cart-line-info .term {
        font-size: 12px;
        color: var(--fg-tertiary);
        font-family: var(--font-mono);
        margin-top: 2px;
      }
      .cart-line-price {
        text-align: right;
      }
      .cart-line-price .amount {
        font-size: 14px;
        font-weight: 700;
      }
      .cart-line-price .billed {
        font-size: 11px;
        color: var(--fg-tertiary);
        margin-top: 2px;
      }
      .cart-line-remove {
        font-size: 11.5px;
        color: var(--fg-tertiary);
        margin-top: 6px;
        cursor: pointer;
        text-decoration: underline;
        background: none;
        border: none;
        font-family: inherit;
        padding: 0;
      }
      .cart-line-remove:hover {
        color: var(--fg);
      }
      .cart-upsell {
        margin-top: 20px;
        padding: 16px;
        border: 1px dashed var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-subtle);
      }
      .cart-upsell .label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--accent-hover);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
      }
      .cart-upsell-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
      }
      .cart-upsell-item .name {
        font-size: 13px;
        font-weight: 600;
      }
      .cart-upsell-item .price {
        font-size: 12px;
        color: var(--fg-tertiary);
      }
      .cart-upsell-add {
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-hover);
        background: none;
        border: 1px solid var(--accent);
        border-radius: 100px;
        padding: 5px 12px;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
      }
      .cart-drawer-footer {
        padding: 20px 24px;
        border-top: 1px solid var(--border);
      }
      .cart-subtotal-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 16px;
      }
      .cart-subtotal-row .label {
        font-size: 14px;
        font-weight: 600;
      }
      .cart-subtotal-row .amount {
        font-size: 20px;
        font-weight: 800;
      }
      .cart-drawer-footer .btn {
        width: 100%;
      }

      /* ================= Checkout page ================= */
      .checkout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
      }
      @media (min-width: 960px) {
        .checkout-grid {
          grid-template-columns: 1.1fr 0.9fr;
        }
      }
      .checkout-section-title {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .checkout-section-title .num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--fg);
        color: var(--bg);
        font-size: 11px;
        font-family: var(--font-mono);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .checkout-auth-toggle {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
      }
      .checkout-auth-toggle button {
        flex: 1;
        padding: 9px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 13px;
        font-weight: 600;
        color: var(--fg-secondary);
        cursor: pointer;
        font-family: inherit;
      }
      .checkout-auth-toggle button.active {
        border-color: var(--fg);
        color: var(--fg);
        background: var(--bg-subtle);
      }
      .checkout-summary-box {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        background: var(--bg-subtle);
        position: sticky;
        top: 90px;
      }
      .checkout-summary-box h3 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 18px;
      }
      .checkout-line {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
      }
      .checkout-line .name {
        font-weight: 600;
      }
      .checkout-line .term {
        color: var(--fg-tertiary);
        font-family: var(--font-mono);
        font-size: 11px;
      }
      .checkout-total-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-top: 16px;
        margin-top: 6px;
      }
      .checkout-total-row .label {
        font-size: 14px;
        font-weight: 700;
      }
      .checkout-total-row .amount {
        font-size: 24px;
        font-weight: 800;
      }
      .checkout-stub {
        margin-top: 20px;
        padding: 16px;
        border: 1px dashed var(--accent);
        border-radius: var(--radius-sm);
        background: var(--accent-soft);
        font-size: 12.5px;
        color: var(--fg-secondary);
        line-height: 1.5;
      }
      .checkout-stub strong {
        color: var(--fg);
      }
      .checkout-empty {
        text-align: center;
        padding: 80px 24px;
      }

      .page-view {
        display: none;
      }
      .page-view.active {
        display: block;
      }

      /* ================= Form submit error ================= */
      .form-submit-error {
        display: none;
        color: #e5484d;
        font-size: 13.5px;
        text-align: center;
        margin-top: 12px;
        line-height: 1.5;
      }
      .form-submit-error.active {
        display: block;
      }