﻿  /* ── Portfolio Hero ──────────────────────────────────────── */
    .pf-hero {
      padding: 64px 40px 44px;
      background: linear-gradient(180deg, #031226 0%, var(--bg-0) 100%);
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .pf-hero::after {
      content: 'PORTFOLIO';
      position: absolute;
      right: -10px; bottom: -24px;
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(50px, 8vw, 130px);
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 1px rgba(54,63,89,0.35);
      letter-spacing: 8px;
      user-select: none; pointer-events: none; line-height: 1;
    }
    .pf-hero-inner {
      max-width: 1400px; margin: 0 auto;
      display: flex; justify-content: space-between;
      align-items: flex-end; flex-wrap: wrap; gap: 20px;
      position: relative; z-index: 1;
    }
    .pf-hero h1 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 52px; font-weight: 700;
      letter-spacing: 4px; text-transform: uppercase;
      color: var(--text-1); margin-bottom: 10px; line-height: 1;
    }
    .pf-hero h1 span { color: var(--gold); }
    .pf-hero p { font-size: 15px; color: var(--text-2); max-width: 500px; line-height: 1.75; }
    .pf-actions { display: flex; gap: 10px; flex-wrap: wrap; }

    .pf-main { max-width: 1400px; margin: 0 auto; padding: 40px 40px 80px; }

    /* Allocation chart card */
    .allocation-card {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      margin-bottom: 28px;
      position: relative;
    }
    .allocation-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-dim), transparent);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      pointer-events: none;
    }
    .allocation-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 14px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 20px;
    }

    .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    @media (max-width: 1100px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 700px)  {
      .portfolio-grid { grid-template-columns: 1fr; }
      .pf-hero { padding: 48px 20px 32px; }
      .pf-main { padding: 28px 20px 60px; }
    }

    /* ── Tool sections ───────────────────────────────────────── */
    .tool-section {
      max-width: 1400px; margin: 0 auto;
      padding: 60px 40px 0;
      border-top: 1px solid var(--border);
    }
    .tool-section-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 32px; font-weight: 700;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--text-1); margin-bottom: 6px; line-height: 1.1;
    }
    .tool-section-title span { color: var(--gold); }
    .tool-section-sub { font-size: 13px; color: var(--text-3); margin-bottom: 28px; max-width: 600px; line-height: 1.75; }

    /* Tool card with top-stripe */
    .tool-card {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .tool-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-dim), transparent);
      pointer-events: none;
    }

    /* ── Maintenance Calculator ─────────────────────────────── */
    .mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .mc-cost-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .mc-cost-row:last-child { border-bottom: none; }
    .mc-cost-label { font-size: 13px; color: var(--text-2); }
    .mc-cost-val { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
    .mc-total-row {
      margin-top: 12px; padding: 14px 16px;
      background: var(--bg-3); border-radius: var(--radius); border: 1px solid var(--border);
    }
    .mc-total-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
    .mc-total-val { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; }
    .mc-roi-block {
      margin-top: 14px; padding: 14px 16px;
      border-radius: var(--radius); border: 1px solid;
      border-left-width: 3px;
    }
    .mc-roi-block.pos { background: rgba(39,174,96,0.06); border-color: rgba(39,174,96,0.2); border-left-color: var(--green-l); }
    .mc-roi-block.neg { background: rgba(231,76,60,0.06); border-color: rgba(231,76,60,0.2); border-left-color: var(--red-l); }
    .mc-roi-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
    .mc-roi-val { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .mc-roi-val.pos { color: var(--green-l); }
    .mc-roi-val.neg { color: var(--red-l); }

    /* ── Fractional Ownership ──────────────────────────────── */
    .frac-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
    .frac-slider-wrap { display: flex; align-items: center; gap: 10px; }
    .frac-slider {
      -webkit-appearance: none; width: 160px; height: 3px;
      border-radius: 0; background: var(--bg-4); outline: none;
    }
    .frac-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 16px; height: 16px;
      border-radius: 50%; background: var(--gold); cursor: pointer;
      border: 2px solid var(--bg-0); box-shadow: 0 0 6px rgba(196,221,242,0.30);
    }
    .frac-count-label { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--gold-light); min-width: 80px; }
    .frac-table { width: 100%; border-collapse: collapse; }
    .frac-table th { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
    .frac-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; color: var(--text-2); }
    .frac-table tr:last-child td { border-bottom: none; }
    .frac-investor-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
    .frac-summary {
      margin-top: 20px; padding: 16px;
      background: var(--bg-3); border-radius: var(--radius);
      border: 1px solid var(--border); display: flex; gap: 32px; flex-wrap: wrap;
    }
    .frac-sum-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
    .frac-sum-val { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

    /* ── Curated Collections ────────────────────────────────── */
    .collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
    .collection-card {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      transition: border-color .2s;
    }
    .collection-card::before {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--gold-dim);
      transition: background .2s;
      pointer-events: none;
    }
    .collection-card:hover { border-color: var(--border-hover); }
    .collection-card:hover::before { background: var(--gold); }
    .collection-header { padding: 18px 20px 14px 18px; border-bottom: 1px solid var(--border); }
    .collection-icon { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--gold); margin-bottom: 8px; }
    .collection-name {
      font-family: 'Rajdhani', sans-serif;
      font-size: 18px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--text-1); margin-bottom: 4px;
    }
    .collection-desc { font-size: 12px; color: var(--text-3); line-height: 1.55; }
    .collection-cars { padding: 12px 20px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
    .collection-car-row { display: flex; justify-content: space-between; align-items: center; }
    .collection-car-name { font-size: 13px; color: var(--text-2); }
    .collection-car-name strong { color: var(--text-1); }
    .collection-car-pct { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; }
    .collection-footer {
      padding: 10px 20px 10px 18px;
      border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    .collection-avg { font-size: 11px; color: var(--text-3); }
    .collection-avg span { color: var(--gold-light); font-weight: 700; }
    .collection-link { font-size: 11px; color: var(--gold); cursor: pointer; letter-spacing: .5px; }
    .collection-link:hover { color: var(--gold-light); }

    @media (max-width: 700px) {
      .tool-section { padding: 40px 20px 0; }
      .mc-grid { grid-template-columns: 1fr; }
    }
