/* ============================================================
       DESIGN TOKENS
       ============================================================ */
    :root {
      --bg-page:          #fcfcfc;
      --bg-card:          #ffffff;
      --blue-primary:     #2534f9;
      --blue-hover:       #1e2bcc;
      --blue-active:      #1515cc;
      --blue-bg-light:    #e5ebff;
      --lime:             #c5f930;
      --lime-text:        #111111;
      --green-heading:    #16a34a;
      --green-icon:       #22c55e;
      --green-badge-bg:   #dcfce7;
      --red-heading:      #dc2626;
      --red-icon:         #ef4444;
      --red-badge-bg:     #fee2e2;
      --icon-blue:        #2534f9;
      --icon-purple:      #7b5eda;
      --icon-green:       #22c55e;
      --icon-orange:      #f97316;
      --icon-blue-light:  #3b82f6;
      --text-heading:     #111111;
      --text-body:        #666666;
      --text-muted:       #888888;
      --text-value:       #0d0d0d;
      --text-white:       #ffffff;
      --border-card:      1px solid rgba(0,0,0,0.04);
      --shadow-card:      0 4px 16px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
      --shadow-hero:      0 8px 32px rgba(0,0,0,0.07);
      --shadow-badge:     0 4px 14px rgba(0,0,0,0.10);
      --shadow-nav:       0 4px 20px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.03);
      --shadow-cta:       0 8px 24px rgba(37,52,249,0.30);
      --radius-page-card: 20px;
      --radius-card:      16px;
      --radius-badge:     12px;
      --radius-pill:      9999px;
      --radius-nav-item:  12px;
      --radius-sidebar:   20px;
      --font-ui:      'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-display: 'Playfair Display', Georgia, serif;
      --t-fast:    all 0.15s ease-out;
      --t-default: all 0.20s ease-out;
    }

    /* ============================================================
       RESET
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body { font-family: var(--font-ui); background-color: var(--bg-page); color: var(--text-heading); min-height: 100vh; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul, ol { list-style: none; }
    iconify-icon { display: inline-flex; align-items: center; justify-content: center; }

    /* ============================================================
       PAGE SHELL
       ============================================================ */
    .page-shell {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 16px;
      padding: 24px;
      max-width: 1340px;
      margin: 0 auto;
      min-height: 100vh;
      align-items: start;
    }

    /* ============================================================
       SIDEBAR
       ============================================================ */
    .sidebar {
      width: 100px;
      flex-shrink: 0;
      background: var(--bg-card);
      border-radius: var(--radius-sidebar);
      box-shadow: var(--shadow-nav);
      border: var(--border-card);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 10px;
      gap: 4px;
      position: sticky;
      top: 24px;
    }

    .sidebar-logo {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: var(--blue-primary);
      background: transparent;
      border-radius: 18px;
      text-decoration: none;
      transition: all 0.2s ease;
      border: 0;
      overflow: hidden;
    }
    .sidebar-logo img {
      width: 46px;
      height: 46px;
      object-fit: contain;
      display: block;
      border-radius: 14px;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }
    .sidebar-logo:hover {
      color: var(--text-primary);
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .sidebar-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 80px;
      height: 64px;
      border-radius: var(--radius-nav-item);
      cursor: pointer;
      transition: var(--t-default);
      text-decoration: none;
      border: 2px solid transparent;
      background: transparent;
      color: var(--text-muted);
    }

    .sidebar-nav-item span {
      font-family: var(--font-ui);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.01em;
      transition: var(--t-default);
    }

    .sidebar-nav-item.active { background-color: var(--blue-bg-light); color: var(--blue-primary); }
    .sidebar-nav-item.active span { color: var(--blue-primary); font-weight: 600; }
    .sidebar-nav-item:not(.active):hover { background-color: #f0f2ff; color: #5566ee; }
    .sidebar-nav-item:not(.active):hover span { color: #5566ee; }
    .sidebar-nav-item:active { background-color: #d8dcff; transform: scale(0.97); transition: all 0.1s ease-out; }
    .sidebar-nav-item:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }

    /* ============================================================
       MAIN CONTENT + TAB PANELS
       ============================================================ */
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }

    /* Tab panel system */
    .tab-panel { display: none; flex-direction: column; gap: 16px; }
    .tab-panel.active { display: flex; }

    /* ============================================================
       PAGE LOAD ANIMATION
       ============================================================ */
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .anim-1 { animation: fadeSlideUp 0.30s ease-out both; animation-delay: 0ms; }
    .anim-2 { animation: fadeSlideUp 0.30s ease-out both; animation-delay: 60ms; }
    .anim-3 { animation: fadeSlideUp 0.30s ease-out both; animation-delay: 110ms; }
    .anim-4 { animation: fadeSlideUp 0.30s ease-out both; animation-delay: 150ms; }

    /* ============================================================
       ── OVERVIEW TAB ──
       ============================================================ */

    /* Hero card */
    .hero-card {
      background: var(--bg-card);
      border-radius: var(--radius-page-card);
      box-shadow: var(--shadow-hero);
      border: var(--border-card);
      display: flex;
      overflow: hidden;
      min-height: 380px;
    }

    .hero-left {
      flex: 0 0 45%;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-brand-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .hero-brand-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(37,52,249,0.2);
      background: #f5f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue-primary);
    }

    .hero-brand-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue-primary);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: 60px;
      font-weight: 900;
      line-height: 1.02;
      color: var(--text-heading);
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }

    .hero-desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-body);
      margin-bottom: 24px;
      max-width: 400px;
    }

    .rating-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background-color: var(--lime);
      border-radius: var(--radius-pill);
      padding: 10px 20px;
      height: 44px;
      align-self: flex-start;
    }

    .rating-value { font-size: 21px; font-weight: 800; color: var(--lime-text); letter-spacing: -0.02em; }
    .rating-label { font-size: 13px; font-weight: 500; color: var(--lime-text); }

    .hero-right {
      flex: 1;
      background-color: var(--bg-card);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      overflow: hidden;
    }

    .rank-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background: var(--bg-card);
      border-radius: var(--radius-badge);
      padding: 10px 14px;
      box-shadow: var(--shadow-badge);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 2;
      border: var(--border-card);
    }

    .rank-badge-icon { color: #888888; display: flex; }
    .rank-badge-text { display: flex; flex-direction: column; gap: 1px; }
    .rank-badge-title { font-size: 11px; font-weight: 600; color: var(--text-heading); line-height: 1.3; }
    .rank-badge-subtitle { font-size: 11px; font-weight: 400; color: var(--text-muted); line-height: 1.3; }

    .hero-bike-image {
      width: 92%;
      max-width: 540px;
      object-fit: contain;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
    }

    /* Stats row */
    .stats-row { display: flex; gap: 12px; align-items: stretch; }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 12px;
      flex: 0 0 auto;
    }

    .stat-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      width: 152px;
      min-height: 128px;
      transition: var(--t-default);
    }

    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.09); }
    .stat-card:active { transform: translateY(0); box-shadow: var(--shadow-card); transition: all 0.1s ease-out; }

    .stat-icon { display: flex; margin-bottom: 12px; }
    .stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; }
    .stat-value { font-size: 30px; font-weight: 700; color: var(--text-value); line-height: 1.1; letter-spacing: -0.02em; }
    .stat-unit { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }

    /* Good / Bad cards */
    .good-card, .bad-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .pros-cons-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .pros-cons-title { font-size: 17px; font-weight: 700; }
    .good-card .pros-cons-title { color: var(--green-heading); }
    .bad-card  .pros-cons-title { color: var(--red-heading); }

    .header-badge {
      width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .good-card .header-badge { background-color: var(--green-badge-bg); color: var(--green-heading); }
    .bad-card  .header-badge { background-color: var(--red-badge-bg);   color: var(--red-heading); }

    .pros-cons-list { display: flex; flex-direction: column; gap: 10px; }
    .pros-cons-item { display: flex; align-items: flex-start; gap: 10px; }
    .pros-cons-item-icon { display: flex; flex-shrink: 0; margin-top: 1px; }
    .good-card .pros-cons-item-icon { color: var(--green-icon); }
    .bad-card  .pros-cons-item-icon { color: var(--red-icon); }
    .pros-cons-item-text { font-size: 13px; font-weight: 400; color: #333333; line-height: 1.45; }

    /* Footer bar */
    .footer-bar {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      height: 72px;
      padding: 0 24px;
      display: flex;
      align-items: center;
    }

    .footer-block { display: flex; align-items: center; gap: 12px; flex: 1; }
    .footer-block-icon { display: flex; flex-shrink: 0; color: #333333; }
    .footer-block-text { display: flex; flex-direction: column; gap: 2px; }
    .footer-block-label { font-size: 9.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
    .footer-block-value { font-size: 13px; font-weight: 600; color: var(--text-value); }
    .footer-separator { font-size: 16px; color: #cccccc; padding: 0 12px; flex-shrink: 0; user-select: none; }

    .footer-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: var(--blue-primary);
      color: var(--text-white);
      font-family: var(--font-ui);
      font-size: 14px;
      font-weight: 600;
      padding: 0 24px;
      height: 48px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      box-shadow: var(--shadow-cta);
      transition: var(--t-default);
      text-decoration: none;
      flex-shrink: 0;
      margin-left: 8px;
      white-space: nowrap;
    }
    .footer-cta:hover { background-color: var(--blue-hover); transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 28px rgba(37,52,249,0.38); }
    .footer-cta:active { background-color: var(--blue-active); transform: scale(0.98); transition: all 0.1s ease-out; }
    .footer-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: -3px; box-shadow: 0 0 0 4px rgba(37,52,249,0.40); }

    /* ============================================================
       ── ENGINE TAB ──
       ============================================================ */

    /* Page header zone (no card bg) */
    .engine-header { display: flex; flex-direction: column; padding: 8px 0 0 0; }

    .engine-brand-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .engine-brand-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(37,52,249,0.2);
      background: #f5f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue-primary);
    }

    .engine-brand-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue-primary);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .engine-brand-model {
      font-size: 14px;
      font-weight: 500;
      color: #444444;
    }

    .engine-page-title {
      font-family: var(--font-ui);
      font-size: 76px;
      font-weight: 500;
      line-height: 1.0;
      color: var(--text-heading);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .engine-subtitle {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-body);
    }

    /* 4 engine stat cards */
    .engine-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .engine-stat-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-height: 160px;
      transition: var(--t-default);
    }

    .engine-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.09); }
    .engine-stat-card:active { transform: translateY(0); box-shadow: var(--shadow-card); transition: all 0.1s ease-out; }

    .engine-stat-icon {
      display: flex;
      margin-bottom: 16px;
      color: var(--blue-primary);
    }

    /* Numeric value row: big number + inline unit */
    .engine-stat-value-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px;
    }

    .engine-stat-number {
      font-family: var(--font-ui);
      font-size: 50px;
      font-weight: 800;
      color: var(--text-value);
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .engine-stat-unit-inline {
      font-family: var(--font-ui);
      font-size: 18px;
      font-weight: 400;
      color: var(--text-value);
      line-height: 1;
    }

    /* Text value (for "Liquid Cooled") */
    .engine-stat-text-value {
      font-family: var(--font-ui);
      font-size: 25px;
      font-weight: 800;
      color: var(--text-value);
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }

    .engine-stat-label {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-muted);
    }

    /* Power & Torque Curve card */
    .chart-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
    }

    .chart-header { margin-bottom: 12px; }

    .chart-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 8px;
    }

    .chart-legend {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legend-line {
      width: 20px;
      height: 2.5px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .legend-line-power  { background-color: #2534f9; }
    .legend-line-torque { background-color: #c7d2fe; }

    .legend-label {
      font-size: 12px;
      font-weight: 500;
      color: #333333;
    }

    .chart-container {
      width: 100%;
      position: relative;
    }

    .chart-svg {
      width: 100%;
      height: 280px;
      overflow: visible;
    }

    /* What this means bar */
    .info-bar {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      height: 72px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      gap: 0;
    }

    .info-bar-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      min-width: 200px;
    }

    .info-bar-icon { color: var(--blue-primary); display: flex; flex-shrink: 0; }

    .info-bar-heading {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-heading);
      white-space: nowrap;
    }

    .info-bar-divider {
      width: 1px;
      height: 32px;
      background: rgba(0,0,0,0.06);
      margin: 0 24px;
      flex-shrink: 0;
    }

    .info-bar-desc {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-body);
      line-height: 1.5;
      flex: 1;
    }

    .info-bar-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: var(--radius-pill);
      padding: 0 20px;
      height: 42px;
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 600;
      color: var(--blue-primary);
      text-decoration: none;
      transition: var(--t-default);
      flex-shrink: 0;
      margin-left: 24px;
      white-space: nowrap;
      cursor: pointer;
      background: transparent;
    }
    .info-bar-cta:hover { background-color: var(--blue-bg-light); border-color: var(--blue-primary); }
    .info-bar-cta:active { background-color: #d8dcff; transition: all 0.1s ease-out; }
    .info-bar-cta:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }

    /* ============================================================
       ── PERFORMANCE TAB ──
       ============================================================ */
    .perf-top-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .perf-stat-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .perf-stat-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }
    .perf-stat-header-icon {
      color: var(--blue-primary);
      display: flex;
    }
    .perf-stat-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-heading);
    }
    .perf-stat-val-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 12px;
    }
    .perf-stat-val {
      font-size: 50px;
      font-weight: 800;
      color: var(--text-value);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .perf-stat-unit {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-value);
    }
    .perf-progress-bg {
      background: #f1f5f9;
      height: 8px;
      border-radius: var(--radius-pill);
      width: 100%;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .perf-progress-fill {
      background: var(--blue-primary);
      height: 100%;
      border-radius: var(--radius-pill);
    }
    .perf-stat-footer {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-muted);
    }

    .perf-middle-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    
    .perf-radar-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
    }
    .perf-radar-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    .perf-radar-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
    }
    .perf-radar-svg-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
    }
    .perf-radar-svg {
      width: 100%;
      max-width: 320px;
      height: auto;
      overflow: visible;
    }
    .perf-radar-legend {
      display: flex;
      justify-content: center;
      gap: 24px;
    }
    
    .perf-aids-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
    }
    .perf-aids-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 16px;
    }
    .perf-aids-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .aid-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 12px;
      height: 64px;
    }
    .aid-pill-green { background: #f0fdf4; }
    .aid-pill-blue { background: #eff6ff; }
    .aid-pill-purple { background: #f5f3ff; }
    .aid-pill-yellow { background: #fffbeb; }
    
    .aid-icon-green { color: #16a34a; }
    .aid-icon-blue { color: var(--blue-primary); }
    .aid-icon-purple { color: #7b5eda; }
    .aid-icon-yellow { color: #d97706; }

    .aid-text {
      display: flex;
      flex-direction: column;
    }
    .aid-title {
      font-size: 13px;
      font-weight: 600;
    }
    .aid-title-green { color: #166534; }
    .aid-title-blue { color: #1e3a8a; }
    .aid-title-purple { color: #4c1d95; }
    .aid-title-yellow { color: #b45309; }
    
    .aid-sub {
      font-size: 11px;
      font-weight: 400;
      color: #555555;
    }
    
    .info-bar-blue-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--blue-primary);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ============================================================
       ── DESIGN TAB ──
       ============================================================ */
    .design-hero-card {
      background: linear-gradient(135deg, #efe9fa 0%, #e2dcf5 100%);
      border-radius: var(--radius-card);
      width: 100%;
      height: 400px;
      position: relative;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .design-hero-inner {
      position: relative;
      width: 100%;
      max-width: 650px;
      height: 100%;
    }
    .design-hero-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 2;
      position: relative;
      pointer-events: none;
    }

    /* SVG for dashed lines */
    .design-lines-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }
    .design-line {
      stroke: #a78bfa;
      stroke-width: 0.5;
      stroke-dasharray: 2, 2;
      fill: none;
    }

    /* Hotspot dots */
    .hotspot-dot {
      position: absolute;
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 1.5px solid var(--blue-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-primary);
      z-index: 3;
      transform: translate(-50%, -50%);
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: var(--t-default);
    }
    .hotspot-dot:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    /* Callout Pills */
    .callout-pill {
      position: absolute;
      background: #ffffff;
      border-radius: 20px;
      padding: 6px 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      z-index: 3;
      transform: translate(-50%, -50%);
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-heading);
      white-space: nowrap;
    }
    .callout-icon {
      color: var(--text-muted);
      display: flex;
    }

    /* Bottom Row Cards */
    .design-bottom-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Colorways Card */
    .colorways-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      position: relative;
    }
    .colorways-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 24px;
    }
    .colorways-flex {
      display: flex;
      gap: 40px;
    }
    .colorway-item {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .colorway-visual {
      display: flex;
      align-items: center;
      position: relative;
      height: 100px;
      width: 190px;
    }
    .colorway-img-crop {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      z-index: 3;
      background: #1c1d21;
      border: 1.5px solid #ffffff;
    }
    .colorway-img-crop img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(2.2);
      transform-origin: 80% 55%;
    }
    .img-matte-black {
      filter: grayscale(100%) brightness(0.5) contrast(1.2);
    }
    .color-circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      border: 1.5px solid #ffffff;
    }
    .cc-1 { left: 45px; z-index: 2; }
    .cc-2 { left: 90px; z-index: 1; }
    
    /* Black palette */
    .cc-b1 { background: #282a36; }
    .cc-b2 { background: #9499ab; }
    
    /* Blue palette */
    .cc-bl1 { background: #434c9c; }
    .cc-bl2 { background: #aaa8fa; }
    
    .colorway-label {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .colorway-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .colorway-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-heading);
    }
    .colorways-arrow {
      position: absolute;
      bottom: 24px;
      right: 24px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #dcdff1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-primary);
      transition: var(--t-default);
      cursor: pointer;
    }
    .colorways-arrow:hover {
      background: var(--blue-bg-light);
      border-color: var(--blue-primary);
    }

    /* Highlights Card */
    .highlights-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
    }
    .highlights-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 24px;
    }
    .highlights-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .hl-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
    }
    .hl-icon { display: flex; }
    .hl-text {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-heading);
    }
    
    /* Pill specific colors */
    .hl-bg-purple { background: #f3e8ff; color: #6b21a8; }
    .hl-bg-green { background: #dcfce7; color: #166534; }
    .hl-bg-blue { background: #e0f2fe; color: #0369a1; }
    .hl-bg-yellow { background: #fef9c3; color: #854d0e; }
    .hl-bg-pink { background: #fce7f3; color: #9d174d; }
    .hl-bg-red { background: #fee2e2; color: #991b1b; }

    /* ============================================================
       ── COMFORT TAB ──
       ============================================================ */
    .comfort-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .comfort-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .comfort-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 24px;
    }
    .comfort-info-icon {
      color: var(--blue-primary);
    }
    
    /* Rider Ergonomics */
    .ergo-visual-area {
      position: relative;
      width: 100%;
      height: 350px;
      margin-bottom: 24px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ergo-bike-img {
      max-height: 85%;
      object-fit: contain;
      opacity: 0.15;
      filter: grayscale(100%);
      pointer-events: none;
    }
    .ergo-overlay-svg {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      z-index: 2;
      pointer-events: none;
    }
    .ergo-line {
      stroke: var(--blue-primary);
      stroke-width: 1.5;
      stroke-dasharray: 4, 4;
      fill: none;
    }
    .ergo-arc {
      stroke: var(--blue-primary);
      stroke-width: 2;
      fill: none;
    }
    .ergo-label {
      position: absolute;
      z-index: 3;
      display: flex;
      flex-direction: column;
    }
    .ergo-label-title {
      font-size: 11px;
      color: var(--text-heading);
      font-weight: 500;
      margin-bottom: 2px;
    }
    .ergo-label-value {
      font-size: 15px;
      color: var(--blue-primary);
      font-weight: 700;
    }
    .ergo-dot {
      width: 8px; height: 8px;
      background: var(--blue-primary);
      border-radius: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 3;
    }
    .ergo-dot-hollow {
      width: 12px; height: 12px;
      border: 2px solid var(--blue-primary);
      background: #fff;
      border-radius: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 3;
    }
    
    /* 4 Bottom Pills */
    .ergo-features-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .ergo-feature {
      flex: 1;
      min-width: 110px;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ergo-f-icon {
      color: var(--blue-primary);
      background: var(--blue-bg-light);
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ergo-f-title { font-size: 11px; color: var(--text-muted); }
    .ergo-f-val { font-size: 13px; font-weight: 600; color: var(--text-heading); line-height: 1.3; }
    
    /* Suspension Comfort */
    .suspension-item { margin-bottom: 20px; }
    .suspension-label-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-heading);
      margin-bottom: 12px;
    }
    .suspension-track-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 11px;
      color: var(--text-muted);
    }
    .suspension-track {
      flex: 1;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      position: relative;
    }
    .suspension-thumb {
      width: 14px; height: 14px;
      background: var(--blue-primary);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .suspension-callout {
      background: #f3e8ff;
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 24px;
    }
    .susp-callout-icon { color: var(--blue-primary); }
    .susp-callout-text { font-size: 12px; color: var(--text-heading); line-height: 1.4; }
    
    /* Pillion Comfort */
    .pillion-score-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .pillion-score-badge {
      background: #84cc16;
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 8px;
    }
    .pillion-score-text {
      color: #16a34a;
      font-weight: 600;
      font-size: 15px;
    }
    .pillion-content-split {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
    }
    .pillion-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13px;
      color: var(--text-heading);
    }
    .plist-item { display: flex; align-items: flex-start; gap: 8px; }
    .plist-item iconify-icon { margin-top: 2px; flex-shrink: 0; }
    .plist-green { color: #16a34a; }
    .plist-yellow { color: #eab308; }
    .pillion-graphic {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.15;
    }
    .comfort-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 8px;
      color: var(--blue-primary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--t-default);
      background: transparent;
    }
    .comfort-btn:hover {
      background: var(--blue-bg-light);
      border-color: var(--blue-primary);
    }

    /* Bottom Bar */
    .comfort-ideal-bar {
      background: #f8fafc;
      border: 1px solid rgba(0,0,0,0.04);
      border-radius: var(--radius-card);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .ideal-icon-circle {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: var(--blue-primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ideal-title { font-weight: 700; font-size: 15px; color: var(--text-heading); flex-shrink: 0; }
    .ideal-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1; }
    .ideal-btn { flex-shrink: 0; padding: 10px 20px; border-radius: 20px; border: 1px solid var(--blue-primary); color: var(--blue-primary); background: transparent; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
    .ideal-btn:hover { background: var(--blue-bg-light); }

    /* ============================================================
       ── VERDICT TAB ──
       ============================================================ */
    .verdict-top-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: flex;
      gap: 32px;
      margin-bottom: 16px;
    }
    .v-score-box {
      background: #84cc16;
      border-radius: 12px;
      width: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .v-score-num {
      font-size: 80px;
      font-weight: 700;
      color: #111111;
      line-height: 1;
      letter-spacing: -2px;
    }
    .v-summary-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 24px;
      border-right: 1px solid rgba(0,0,0,0.06);
    }
    .v-summary-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 8px;
    }
    .v-summary-text {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 16px;
    }
    .v-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f7fee7;
      color: #16a34a;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      width: fit-content;
    }
    .v-subscores {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }
    .v-subscore-item {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .v-sub-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--blue-bg-light);
      color: var(--blue-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .v-sub-content { flex: 1; }
    .v-sub-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 12px;
    }
    .v-sub-title { font-weight: 500; color: var(--text-heading); }
    .v-sub-val { font-weight: 700; color: var(--blue-primary); }
    .v-sub-track {
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
    }
    .v-sub-fill {
      height: 100%;
      background: var(--blue-primary);
      border-radius: 2px;
    }
    
    /* Verdict Middle */
    .verdict-middle-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .v-buyskip-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      display: flex;
      overflow: hidden;
    }
    .v-buy-col, .v-skip-col {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .v-skip-col {
      border-left: 1px solid rgba(0,0,0,0.06);
    }
    .v-col-header {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
    }
    .v-buy-header { background: #f0fdf4; color: #111111; }
    .v-skip-header { background: #fff1f2; color: #111111; }
    .v-col-list {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .v-list-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      color: var(--text-heading);
      line-height: 1.4;
    }
    .v-check { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
    .v-cross { color: #ef4444; flex-shrink: 0; margin-top: 2px; }
    
    .v-reviews-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .v-rev-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 4px;
    }
    .v-rev-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .v-stars {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .v-star-icon {
      color: var(--blue-primary);
      cursor: pointer;
    }
    .v-rev-hint {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }
    .v-rev-community {
      background: #f8fafc;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }
    .v-com-icon { color: var(--blue-primary); flex-shrink: 0; }
    .v-com-text { flex: 1; }
    .v-com-t1 { font-size: 13px; font-weight: 600; color: var(--blue-primary); margin-bottom: 2px; }
    .v-com-t2 { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
    
    /* Bottom Bar */
    .v-final-bar {
      background: #f8fafc;
      border: 1px solid rgba(0,0,0,0.04);
      border-radius: var(--radius-card);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .v-flag-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--blue-primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .v-final-title { font-weight: 700; font-size: 15px; color: var(--text-heading); flex-shrink: 0; }
    .v-final-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1; }
    .v-final-btn {
      flex-shrink: 0; padding: 12px 24px; border-radius: 8px;
      background: var(--blue-primary); color: #fff;
      font-weight: 600; font-size: 13px; border: none; cursor: pointer;
      display: flex; align-items: center; gap: 8px; transition: var(--t-default);
    }
    .v-final-btn:hover { opacity: 0.9; }

    /* ============================================================
       ── DEEP DIVE TAB ──
       ============================================================ */
    .deep-dive-card {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      border: var(--border-card);
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      min-height: 500px;
      margin-top: 24px;
    }
    .dd-sidebar {
      width: 100px;
      flex-shrink: 0;
      border-right: 1px solid rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 0;
      gap: 32px;
    }
    .dd-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      cursor: pointer;
      transition: var(--t-default);
    }
    .dd-action:hover {
      color: var(--blue-primary);
    }
    .dd-action span {
      font-size: 11px;
      font-weight: 500;
    }
    .dd-content {
      flex: 1;
      padding: 40px 60px;
    }
    .dd-progress-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 40px;
    }
    .dd-progress-track {
      flex: 1;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      position: relative;
    }
    .dd-progress-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 18%;
      background: var(--blue-primary);
      border-radius: 2px;
    }
    .dd-progress-text {
      font-size: 13px;
      color: var(--blue-primary);
      font-weight: 600;
      white-space: nowrap;
    }
    .dd-article {
      color: var(--text-heading);
      line-height: 1.7;
      font-size: 15px;
    }
    .dd-article p {
      margin-bottom: 24px;
    }
    .dd-article h2 {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      margin-top: 48px;
      margin-bottom: 20px;
      color: #111111;
    }
    .dd-pullquote {
      background: #f8fafc;
      border-radius: 12px;
      padding: 24px 32px;
      display: flex;
      gap: 16px;
      margin: 32px 0;
    }
    .dd-quote-icon {
      color: var(--blue-primary);
      margin-top: 2px;
    }
    .dd-quote-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dd-quote-text {
      font-size: 14px;
      color: var(--blue-primary);
      line-height: 1.6;
      flex: 1;
    }
    .dd-quote-author {
      text-align: right;
      font-size: 12px;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    
    .author-byline {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 16px;
    }
    .author-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      overflow: hidden;
    }
    .author-meta { color: var(--text-muted); }

    /* ============================================================
       TECH TAB
       ============================================================ */
    .tech-header {
      padding: 40px 40px 28px;
    }
    .tech-chip-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .tech-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .tech-chip-blue { background: var(--blue-primary); color: #fff; }
    .tech-chip-outline { background: transparent; border: 1px solid rgba(0,0,0,0.12); color: var(--text-muted); }
    .tech-page-title {
      font-size: 52px;
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.05;
      color: var(--text-heading);
      margin-bottom: 10px;
    }
    .tech-page-subtitle {
      font-size: 15px;
      color: var(--text-body);
      line-height: 1.6;
      max-width: 540px;
    }
    /* Dashboard grid */
    .tech-body {
      padding: 0 28px 40px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .tech-row-top {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }
    .tech-row-mid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .tech-row-bot {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    /* Base card */
    .tech-card {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,0.06);
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      position: relative;
      overflow: hidden;
    }
    .tech-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .tech-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .tci-blue   { background: #e5ebff; color: var(--blue-primary); }
    .tci-purple { background: #f0ebff; color: #7b5eda; }
    .tci-green  { background: #dcfce7; color: #16a34a; }
    .tci-orange { background: #fff3e0; color: #f97316; }
    .tci-dark   { background: #111; color: #fff; }
    .tci-red    { background: #fee2e2; color: #dc2626; }
    .tech-card-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    /* TFT card */
    .tft-display-visual {
      width: 100%;
      aspect-ratio: 16/9;
      background: #0a0a1a;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .tft-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .tft-number {
      font-size: 36px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -1px;
    }
    .tft-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .tft-glow {
      position: absolute;
      bottom: -30px; left: 50%;
      transform: translateX(-50%);
      width: 120px; height: 80px;
      background: radial-gradient(ellipse, rgba(37,52,249,0.5) 0%, transparent 70%);
    }
    .tft-specs-row {
      display: flex;
      gap: 12px;
    }
    .tft-spec-pill {
      flex: 1;
      background: #f5f5f5;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 68px;
      text-align: center;
    }
    .tft-spec-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-heading);
      display: block;
      line-height: 1;
    }
    .tft-spec-lbl {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      line-height: 1.2;
    }
    /* IMU card */
    .imu-axis-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .imu-axis {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .imu-axis-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      width: 36px;
      flex-shrink: 0;
      white-space: nowrap;
      text-transform: uppercase;
    }
    .imu-bar-track {
      flex: 1;
      height: 6px;
      background: #f0f0f0;
      border-radius: 99px;
      overflow: hidden;
    }
    .imu-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--blue-primary), #7b5eda);
    }
    .imu-axis-val {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-heading);
      width: 36px;
      text-align: right;
    }
    .imu-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #111;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      margin-top: 14px;
    }
    /* Rider aids card */
    .aids-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .aid-item {
      background: #f8f8f8;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 60px;
    }
    .aid-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--blue-primary);
      flex-shrink: 0;
    }
    .aid-dot-green { background: #22c55e; }
    .aid-dot-orange { background: #f97316; }
    .aid-dot-purple { background: #7b5eda; }
    .aid-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-heading);
      display: block;
      line-height: 1.2;
    }
    .aid-levels {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 500;
      display: block;
      margin-top: 2px;
    }
    /* Connectivity card */
    .conn-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .conn-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border-radius: 10px;
      background: #f8f8f8;
    }
    .conn-icon {
      width: 34px; height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .conn-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-heading);
      display: block;
      margin-bottom: 2px;
    }
    .conn-desc {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    /* Powertrain tech card */
    .pt-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .pt-item:last-child { border-bottom: none; }
    .pt-key {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
    }
    .pt-val {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-heading);
      text-align: right;
      max-width: 60%;
    }
    .pt-badge {
      display: inline-block;
      background: var(--blue-bg-light);
      color: var(--blue-primary);
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      margin-left: 6px;
    }
    /* Quick spec table */
    .spec-table-card {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .spec-table-head {
      padding: 20px 24px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .spec-table-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-heading);
    }
    .spec-table-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .spec-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 24px;
      border-bottom: 1px solid rgba(0,0,0,0.04);
      gap: 8px;
    }
    .spec-row:nth-child(odd) { background: #fafafa; }
    .spec-row-key {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .spec-row-val {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-heading);
      text-align: right;
    }
    /* Responsive tech */
    @media (max-width: 1100px) {
      .tech-row-top { grid-template-columns: 1fr 1fr; }
      .tech-page-title { font-size: 40px; }
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .hero-title { font-size: 48px; }
      .engine-page-title { font-size: 56px; }
      .stat-card { width: 132px; }
      .stats-row { flex-wrap: wrap; }
      .good-card, .bad-card { flex: 0 0 calc(50% - 6px); }
      .engine-stats-row { grid-template-columns: repeat(2, 1fr); }
      .perf-top-row { grid-template-columns: repeat(2, 1fr); }
      .perf-middle-row { grid-template-columns: 1fr; }
      .design-bottom-row { grid-template-columns: 1fr; }
      .comfort-grid { grid-template-columns: 1fr; }
      .verdict-middle-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 767px) {
      .tech-header { padding: 24px 20px 16px; }
      .tech-body { padding: 0 16px 28px; }
      .tech-row-top { grid-template-columns: 1fr; }
      .tech-row-mid { grid-template-columns: 1fr; }
      .tech-page-title { font-size: 32px; }
      .spec-table-body { grid-template-columns: 1fr; }
      .page-shell { display: flex; flex-direction: column; padding: 16px 16px 100px; gap: 12px; }
      .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; flex-direction: row; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; overflow-x: auto; gap: 2px; justify-content: flex-start; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 -4px 20px rgba(0,0,0,0.08); scrollbar-width: none; -ms-overflow-style: none; z-index: 1000; }
      .sidebar::-webkit-scrollbar { display: none; }
      .sidebar-logo { display: none; }
      .sidebar-nav-item { width: 64px; height: 56px; flex-shrink: 0; border-radius: 8px; }
      .hero-card { flex-direction: column; }
      .hero-left { flex: none; padding: 24px; }
      .hero-right { min-height: 220px; flex: none; }
      .hero-title { font-size: 40px; }
      .engine-page-title { font-size: 40px; }
      .stats-row { flex-direction: column; }
      .stats-grid { grid-template-columns: repeat(3, 1fr); }
      .stat-card { width: auto; }
      .engine-stats-row { grid-template-columns: repeat(2, 1fr); }
      .perf-top-row { grid-template-columns: 1fr; }
      .perf-aids-grid { grid-template-columns: 1fr; }
      .design-hero-card { height: 300px; }
      .colorways-flex { flex-direction: column; gap: 24px; }
      .highlights-grid { grid-template-columns: 1fr; }
      .callout-pill { display: none; }
      .design-lines-svg { display: none; }
      .comfort-ideal-bar { flex-direction: column; text-align: center; }
      .ergo-visual-area { height: 250px; }
      
      /* Verdict Mobile */
      .verdict-top-card { flex-direction: column; gap: 24px; }
      .v-score-box { width: 100%; height: 160px; }
      .v-summary-box { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 24px; }
      .v-buyskip-card { flex-direction: column; }
      .v-skip-col { border-left: none; border-top: 1px solid rgba(0,0,0,0.06); }
      .v-final-bar { flex-direction: column; text-align: center; }

      /* Deep Dive Mobile */
      .deep-dive-card { display: flex; flex-direction: column; }
      .dd-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 16px; justify-content: space-around; }
      
      .footer-bar { height: auto; flex-wrap: wrap; padding: 16px; gap: 12px; }

      .footer-separator { display: none; }
      .footer-block { flex: 0 0 calc(50% - 6px); }
      .footer-cta { width: 100%; justify-content: center; margin-left: 0; }
      .info-bar { height: auto; flex-wrap: wrap; padding: 16px; gap: 12px; }
      .info-bar-cta { margin-left: 0; }
    }