/* ═══════════════════════════════════════════
   FOLT — Home Page Styles (v2)
   Location: /home/shortsta/folt.co.uk/assets/css/home.css
   ═══════════════════════════════════════════ */

/* ═══ HERO ═══ */
.hero-section {
    background: #ffffff;
    padding: 60px 24px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('/assets/images/carwalk.jpg') center center / cover no-repeat;
    opacity: 0.80;
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; background: rgba(255, 255, 255, 0.90); border-radius: 10px; padding: 1.5rem 2rem;  }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(28, 43, 58, 0.05);
    border: 1px solid rgba(28, 43, 58, 0.18);
    border-radius: 10px;
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--navy,#1c2b3a);
    margin-bottom: 20px;
    animation: fadeInDown 0.5s ease;
}
.hero-badge-dot {
    width: 6px; height: 6px;
    background: var(--orange,#ff690c);
    border-radius: 50%;
    animation: pulse 1s infinite;
}
.hero-title {
    font-size: clamp(2rem, 5.5vw, 3rem);
    font-weight: 700;
    color: var(--navy,#1c2b3a);
    margin: 0 0 14px;
    letter-spacing: 1px;
    line-height: 1.15;
    font-family: 'Space Mono', 'JetBrains Mono', monospace;
    animation: fadeInUp 0.5s ease;
}
.hero-sub {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--grey-800,#343a40);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
    animation: fadeInUp 0.5s ease 0.08s both;
}
.hero-stat {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grey-700,#495057);
    margin-bottom: 24px;
    animation: fadeInUp 0.5s ease 0.12s both;
}
.hero-stat strong { color: var(--orange,#ff690c); }

.hero-form {
    max-width: 380px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease 0.16s both;
}

.hero-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
    animation: fadeInUp 0.5s ease 0.24s both;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--grey-700,#495057);
    font-weight: 500;
}
.trust-item svg { opacity: 0.5; }

/* ═══ PREVIEW CARD ═══ */
.preview-section {
    padding: 0 24px 60px;
    background: #fff;
    text-align: center;
}
.section-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--grey-500,#adb5bd);
    margin-bottom: 18px;
}
.preview-card {
    background: var(--grey-50,#f8f9fa);
    border: 1px solid var(--grey-200,#e9ecef);
    border-radius: 14px;
    padding: 28px 20px;
    position: relative;
    overflow: hidden;
}
.preview-gradient-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #059669, #f59e0b, #dc2626);
}
.preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.preview-plate {
    background: #ffd700;
    border: 2px solid var(--grey-800,#343a40);
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
}
.preview-car-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy,#1c2b3a);
}
.preview-scores {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 20px;
}
.preview-score { text-align: center; }
.preview-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 4px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 1.3rem;
    font-weight: 800;
}
.ring-green { border-color: #059669; color: #059669; }
.ring-amber { border-color: #f59e0b; color: #f59e0b; }
.ring-red { border-color: #dc2626; color: #dc2626; }
.preview-score-label { font-size: 0.68rem; color: var(--grey-600,#868e96); font-weight: 500; }

.preview-tags { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ptag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ptag-green { background: rgba(5,150,105,0.1); color: #059669; }
.ptag-amber { background: rgba(245,158,11,0.1); color: #f59e0b; }
.ptag-red { background: rgba(220,38,38,0.1); color: #dc2626; }

/* ═══ SECTION SHARED ═══ */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 1.6rem; font-weight: 800; color: var(--navy,#1c2b3a); margin-bottom: 8px; }
.section-header p { font-size: 0.95rem; color: var(--grey-600,#868e96); max-width: 480px; margin: 0 auto; }

/* ═══ VALUE PROPS — light bg ═══ */
.values-section { padding: 64px 24px; background: var(--light,#f8f9fa); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.value-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    border: 1px solid var(--border,#d0d3d8);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.09;
    z-index: -1;
    transition: opacity 0.3s;
}
.value-card:hover::before { opacity: 0.1; }
.vc-faults::before { background-image: url('/assets/images/4.jpg'); }
.vc-mot::before { background-image: url('/assets/images/3.jpg'); }
.vc-confidence::before { background-image: url('/assets/images/5.jpg'); }
.value-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28,43,58,0.1); }
.value-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.vi-faults { background: rgba(220,38,38,0.08); }
.vi-mot { background: rgba(245,158,11,0.08); }
.vi-confidence { background: rgba(5,150,105,0.08); }
.value-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy,#1c2b3a); margin-bottom: 6px; }
.value-card p { font-size: 0.82rem; color: var(--navy,#1c2b3a); line-height: 1.5; }

/* ═══ EXAMPLE REPORT ═══ */
.example-section { padding: 64px 0px; background: #fff; }
.example-report {
    background: #fff;
    border: 1px solid var(--grey-200,#e9ecef);
    border-radius: 14px;
    overflow: hidden;
}

.ex-plate-wrap { text-align: center; padding: 28px 24px 12px; }
.ex-plate {
    display: inline-block;
    background: #ffd700;
    border: 3px solid var(--grey-800,#343a40);
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 3px;
    font-family: 'Space Mono', monospace;
}

.ex-car-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--navy,#1c2b3a);
    padding: 8px 24px 20px;
}

.ex-key-info {
    display: flex;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--grey-200,#e9ecef);
    border-bottom: 1px solid var(--grey-200,#e9ecef);
    background: var(--grey-50,#f8f9fa);
}
.ex-key-item {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-right: 1px solid var(--grey-200,#e9ecef);
}
.ex-key-item:last-child { border-right: none; }
.ex-key-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--grey-500,#adb5bd);
    margin-bottom: 2px;
}
.ex-key-value {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy,#1c2b3a);
}

.ex-scores {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 28px 24px;
}
.ex-score-card { text-align: center; }
.ex-score-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 4px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 1.5rem;
    font-weight: 800;
}
.ex-score-title { font-size: 0.82rem; font-weight: 700; color: var(--navy,#1c2b3a); }
.ex-score-desc { font-size: 0.68rem; color: var(--grey-500,#adb5bd); margin-top: 2px; }

.ex-section-label {
    padding: 10px 24px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--grey-500,#adb5bd);
    border-top: 1px solid var(--grey-200,#e9ecef);
    background: #fff;
}

.ex-breakdown { padding: 16px 24px 20px; }
.ex-breakdown-rings {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 16px;
}
.ex-mini-score { text-align: center; }
.ex-mini-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 1.1rem;
    font-weight: 800;
}
.ex-mini-score span { font-size: 0.68rem; color: var(--grey-600,#868e96); font-weight: 500; }
.ex-breakdown-details { padding: 0 4px; }
.ex-bd-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--grey-700,#495057);
    padding: 4px 0;
    line-height: 1.4;
}
.ex-bd-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    margin-top: 2px;
}

.ex-mot-history { padding: 12px 24px 20px; }
.ex-mot-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy,#1c2b3a);
    margin-bottom: 8px;
}
.ex-mot-stats {
    font-size: 0.78rem;
    color: var(--grey-600,#868e96);
    margin-bottom: 12px;
}
.ex-mot-test {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--grey-100,#f1f3f5);
    font-size: 0.8rem;
}
.ex-mot-test:last-child { border-bottom: none; }
.ex-mot-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.ex-badge-pass { background: rgba(5,150,105,0.1); color: #059669; }
.ex-badge-fail { background: rgba(220,38,38,0.1); color: #dc2626; }
.ex-mot-date { color: var(--navy,#1c2b3a); font-weight: 500; }
.ex-mot-miles { margin-left: auto; color: var(--grey-500,#adb5bd); font-weight: 500; }

.ex-faults { padding: 0 24px 16px; }
.ex-fault {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--grey-100,#f1f3f5);
}
.ex-fault:last-child { border-bottom: none; }
.ex-fault-sev {
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.ex-fault-sev.sev-red { background: #dc2626; }
.ex-fault-sev.sev-amber { background: #f59e0b; }
.ex-fault-sev.sev-green { background: #059669; }
.ex-fault-body strong { font-size: 0.88rem; color: var(--navy,#1c2b3a); display: block; margin-bottom: 4px; }
.ex-fault-body p { font-size: 0.8rem; color: var(--grey-600,#868e96); line-height: 1.5; margin: 0; }
.ex-fault-cost { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.ex-cost-dealer { font-size: 0.72rem; font-weight: 600; color: var(--navy,#1c2b3a); }
.ex-cost-indie { font-size: 0.72rem; font-weight: 600; color: #059669; }

.ex-questions { padding: 0 24px 16px; }
.ex-q {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.84rem;
    color: var(--grey-800,#343a40);
    border-bottom: 1px solid var(--grey-100,#f1f3f5);
    font-style: italic;
}
.ex-q:last-child { border-bottom: none; }
.ex-q-num {
    width: 22px; height: 22px;
    background: var(--navy,#1c2b3a);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    font-style: normal;
    flex-shrink: 0;
}

.ex-verdict {
    text-align: center;
    padding: 24px;
    border-top: 1px solid var(--grey-200,#e9ecef);
}
.ex-verdict-label { font-size: 0.95rem; font-weight: 700; color: var(--navy,#1c2b3a); margin-bottom: 4px; }
.ex-verdict-msg { font-size: 0.88rem; font-weight: 600; color: #f59e0b; margin-bottom: 16px; }
.ex-verdict-pips { display: flex; justify-content: center; gap: 10px; }
.ex-pip {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.ex-pip-off { background: #e5e7eb; opacity: 0.25; }
.ex-pip-active { box-shadow: 0 3px 12px rgba(0,0,0,0.15); opacity: 1; }

.ex-blur {
    position: relative;
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(248,249,250,0) 0%, rgba(248,249,250,1) 30%);
}
.ex-blur-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    filter: blur(2px);
    opacity: 0.4;
}
.ex-blur-items span {
    background: var(--grey-200,#e9ecef);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey-600,#868e96);
}
.ex-blur-cta p {
    font-size: 0.9rem;
    color: var(--grey-600,#868e96);
    margin-bottom: 14px;
    font-weight: 500;
}

/* ═══ WHAT'S IN YOUR REPORT — navy bg ═══ */
.report-contents-section { padding: 64px 24px; background: #fff; }
.rc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.rc-item {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: var(--grey-50,#f8f9fa);
    border-radius: 10px;
    border: 1px solid var(--grey-200,#e9ecef);
    transition: transform 0.2s;
}
.rc-item:hover { transform: translateY(-2px); }
.rc-item-full { grid-column: 1 / -1; }
.rc-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rc-red { background: rgba(220,38,38,0.08); color: #dc2626; }
.rc-amber { background: rgba(245,158,11,0.08); color: #f59e0b; }
.rc-green { background: rgba(5,150,105,0.08); color: #059669; }
.rc-navy { background: rgba(28,43,58,0.08); color: var(--navy,#1c2b3a); }
.rc-orange { background: rgba(255,105,12,0.88); color: var(--orange,#ff690c); }
.rc-text h3 { font-size: 0.88rem; font-weight: 700; color: var(--navy,#1c2b3a); margin: 0 0 4px; }
.rc-text p { font-size: 0.78rem; color: var(--grey-600,#868e96); line-height: 1.5; margin: 0; }

@media (max-width: 640px) {
    .rc-grid { grid-template-columns: 1fr; }
    .rc-item-full { grid-column: auto; }
}

/* ═══ HOW IT WORKS — light bg ═══ */
.steps-section { padding: 64px 24px; background: var(--light,#f8f9fa); }
.steps-section .section-header h2 { color: var(--navy,#1c2b3a); }
.steps-section .section-header p { color: var(--grey-600,#868e96); }
.steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}
.step { flex: 1; max-width: 360px; text-align: center; position: relative; }
.step-num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(28,43,58,0.08);
    color: var(--navy,#1c2b3a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 12px;
}
.step-num.step-orange { background: var(--orange,#ff690c); color: #fff; }
.step h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy,#1c2b3a); margin-bottom: 4px; }
.step p { font-size: 0.95rem; color: var(--grey-600,#868e96); line-height: 1.5; }
.step-connector {
    position: absolute;
    top: 24px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    right: 0;
    height: 2px;
    background: rgba(28,43,58,0.12);
}

/* ═══ BOTTOM CTA ═══ */
.cta-bottom {
    padding: 56px 24px;
    background: var(--navy,#1c2b3a);
}
.cta-bottom h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.cta-bottom p { color: rgba(255,255,255,0.65); margin-bottom: 24px; font-size: 0.9rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .values-grid { grid-template-columns: 1fr; gap: 14px; }
    .steps-row { flex-direction: column; align-items: center; }
    .step-connector { display: none; }
    .hero-section { padding: 44px 20px 40px; }
    .hero-trust { flex-direction: column; align-items: center; gap: 6px; }
    .ex-scores { gap: 28px; }
    .ex-score-ring { width: 68px; height: 68px; font-size: 1.3rem; }
    .ex-key-info { flex-wrap: wrap; }
    .ex-key-item { flex: 0 0 33.33%; border-bottom: 1px solid var(--grey-200,#e9ecef); }
    .ex-key-item:nth-child(4), .ex-key-item:nth-child(5) { flex: 0 0 50%; }
    .ex-key-item:last-child { border-right: none; }
    .ex-car-title { font-size: 1.15rem; }
    .ex-plate { font-size: 1.2rem; padding: 8px 22px; }
    .ex-breakdown-rings { gap: 16px; }
    .ex-mini-ring { width: 44px; height: 44px; font-size: 0.95rem; }
    .ex-mot-summary { flex-direction: column; align-items: flex-start; gap: 2px; }
    .ex-fault-cost { flex-direction: column; gap: 4px; }
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}