/* Inner Pages - DealJudge Prototype 10 — Automotive Edition */

/* ==================== PAGE HERO — CAR BACKGROUND ==================== */
.page-hero {
    position: relative;
    padding: 160px 24px 90px;
    text-align: center;
    overflow: hidden;
    background: #0a0a0a;
}

.page-hero .container { position: relative; z-index: 2; }

.page-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    opacity: 0.35;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.7) 50%, #0a0a0a 100%);
    z-index: 1;
}

.page-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    padding: 8px 18px;
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5);
}

.page-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}

.page-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 50px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.page-hero-cta:hover {
    background: var(--accent-hover, #e05500);
    color: #fff;
    transform: translateY(-2px);
}

/* ==================== RACING STRIPE DIVIDER (reusable) ==================== */
.racing-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
    opacity: 0.6;
}

/* ==================== ABOUT SECTION ==================== */
.about-section {
    position: relative;
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* Carbon fiber pattern */
.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ffffff' fill-opacity='0.012'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.about-section > .container { position: relative; z-index: 1; }

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-content h2 {
    font-size: 24px;
    margin: 48px 0 20px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-content h2 i {
    font-size: 20px;
    opacity: 0.8;
}

.about-content h2:first-child {
    margin-top: 0;
}

.about-content p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-content ul {
    list-style: none;
    margin: 20px 0;
}

.about-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
}

.about-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--accent);
}

.about-content ul li strong {
    color: var(--text);
}

/* ==================== VALUES GRID — with automotive icons ==================== */
.values-section {
    padding: 80px 0;
    background: var(--bg);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.value-card {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color 0.2s, transform 0.3s;
}

.value-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.value-card .value-icon {
    font-size: 28px;
    color: var(--accent);
    margin-bottom: 16px;
    display: block;
}

.value-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--accent);
}

.value-card p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ==================== COMPARISON TABLE ==================== */
.comparison-section {
    padding: 80px 0;
    background: var(--bg-elevated);
}

.comparison-section .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.comparison-section .section-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    padding: 6px 16px;
    border: 1px solid rgba(255,107,0,0.25);
    background: rgba(255,107,0,0.08);
    margin-bottom: 16px;
}

.comparison-section h2 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.comparison-sub {
    color: var(--text-muted);
    font-size: 16px;
}

.comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 700px;
}

.comparison-table thead th {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 12px;
    text-align: center;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

.comparison-table .feature-col {
    text-align: left;
    min-width: 200px;
}

.comparison-table .dj-col {
    color: var(--accent);
    background: rgba(255,107,0,0.06);
    border-bottom-color: var(--accent);
}

.comparison-table tbody td {
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.comparison-table tbody tr:hover {
    background: rgba(255,107,0,0.03);
}

.comparison-table .feature-name {
    text-align: left;
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.comparison-table .dj-cell {
    background: rgba(255,107,0,0.06);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

.comparison-table tbody tr:last-child .dj-cell {
    border-bottom: 2px solid var(--accent);
}

.comparison-table .partial {
    font-size: 12px;
    color: var(--warning);
    font-weight: 600;
}

.comparison-table .dj-never {
    font-weight: 700;
    color: var(--success);
    font-size: 13px;
}

.comparison-table .sells-yes {
    font-weight: 600;
    color: var(--danger);
    font-size: 13px;
}

.comparison-table .dj-price {
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
    line-height: 1.4;
}

.comparison-table .dj-price small {
    display: block;
    font-weight: 600;
    color: var(--success);
    font-size: 11px;
}

.comparison-table .comp-price {
    font-size: 12px;
    color: var(--text-dim);
}

.comparison-footnote {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 20px;
    font-style: italic;
}

/* Light theme comparison */
[data-theme="light"] .comparison-section {
    background: #f0f1f3;
}
[data-theme="light"] .comparison-table thead th {
    border-bottom-color: #d0d5db;
}
[data-theme="light"] .comparison-table tbody td {
    border-bottom-color: #e2e5e9;
}
[data-theme="light"] .comparison-table .dj-cell {
    background: rgba(255,107,0,0.05);
}
[data-theme="light"] .comparison-table .dj-col {
    background: rgba(255,107,0,0.05);
}

@media (max-width: 768px) {
    .comparison-table { font-size: 12px; }
    .comparison-table thead th { font-size: 11px; padding: 12px 8px; }
    .comparison-table tbody td { padding: 10px 8px; }
    .comparison-table .feature-name { font-size: 12px; }
}

/* ==================== CONTACT SECTION ==================== */
.contact-section {
    position: relative;
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* Tire tread pattern */
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L10 15 L10 25 Z M20 0 L15 10 L25 10 Z M40 20 L30 25 L30 15 Z M20 40 L25 30 L15 30 Z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.contact-section > .container { position: relative; z-index: 1; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: 24px;
    margin-bottom: 16px;
}

.contact-info > p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 32px;
}

.contact-detail {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.contact-detail:hover {
    border-color: var(--accent);
}

.contact-detail .contact-icon {
    font-size: 22px;
    color: var(--accent);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    padding-top: 2px;
}

.contact-detail svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.contact-detail div h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-detail div p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.contact-detail div a {
    color: var(--accent);
    transition: opacity 0.2s;
}

.contact-detail div a:hover {
    opacity: 0.8;
}

/* Technium Foundry logo */
.tf-logo-link {
    display: inline-block;
    margin-bottom: 24px;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
.tf-logo-link:hover {
    opacity: 0.7;
}
.tf-logo {
    height: 28px;
    width: auto;
}

/* Contact quick links */
.contact-links {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.contact-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    background: rgba(255, 107, 0, 0.06);
    border: 1px solid rgba(255, 107, 0, 0.2);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.contact-link-badge:hover {
    background: rgba(255, 107, 0, 0.12);
    border-color: var(--accent);
}

.contact-link-badge i {
    font-size: 14px;
}

/* Contact Form */
.contact-form {
    background: var(--bg);
    padding: 40px;
    border: 1px solid var(--border);
    position: relative;
}

/* Orange top border like a racing stripe */
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dim));
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group select option {
    background: var(--bg-card);
    color: var(--text);
}

.form-submit {
    width: 100%;
    padding: 16px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-submit:hover {
    background: var(--accent-dim);
}

.form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-form-status {
    margin-top: 16px;
    padding: 14px 16px;
    font-size: 14px;
    display: none;
}

.contact-form-status.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.contact-form-status.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* ==================== FEATURES PAGE ==================== */
.features-page-section {
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.feature-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}

.feature-block:last-child {
    border-bottom: none;
}

.feature-block .feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    color: var(--accent);
    font-size: 28px;
    transition: transform 0.3s;
}

.feature-block:hover .feature-icon {
    transform: scale(1.1);
}

.feature-block .feature-icon svg {
    width: 36px;
    height: 36px;
    color: var(--accent);
}

.feature-text h2 {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--text);
}

.feature-text p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.feature-details {
    list-style: none;
    margin: 16px 0 0;
}

.feature-details li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.feature-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--accent);
}

.feature-details li strong {
    color: var(--text);
}

/* ==================== HOW IT WORKS — STEPS ==================== */
.steps-section {
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 0;
    border-bottom: 1px solid var(--border);
}

.step-row:last-child {
    border-bottom: none;
}

.step-row.reverse {
    direction: rtl;
}

.step-row.reverse > * {
    direction: ltr;
}

.step-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    color: var(--border);
    line-height: 1;
    margin-bottom: 16px;
}

.step-num .step-icon {
    font-size: 24px;
    color: var(--accent);
}

.step-content h2 {
    font-size: 28px;
    margin-bottom: 16px;
    color: var(--accent);
}

.step-intro {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.step-list {
    list-style: none;
}

.step-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.step-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--accent);
}

.step-image img {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* ==================== PRICING SECTION ==================== */
.pricing-section {
    position: relative;
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* Asphalt grain pattern */
.pricing-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L12 10 M30 5 L32 5 M50 15 L52 15 M70 8 L72 8 M90 12 L92 12 M20 30 L22 30 M40 25 L42 25 M60 35 L62 35 M80 28 L82 28 M5 50 L7 50 M25 45 L27 45 M45 55 L47 55 M65 48 L67 48 M85 52 L87 52 M15 70 L17 70 M35 65 L37 65 M55 75 L57 75 M75 68 L77 68 M95 72 L97 72 M8 90 L10 90 M28 85 L30 85 M48 95 L50 95 M68 88 L70 88 M88 92 L90 92' stroke='%23ffffff' stroke-opacity='0.025' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.pricing-section > .container { position: relative; z-index: 1; }

.pricing-section .pricing-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto 40px;
}

.pricing-section .pricing-cards-row.pricing-single {
    grid-template-columns: 1fr;
    max-width: 480px;
}

@media (max-width: 768px) {
    .pricing-section .pricing-cards-row { grid-template-columns: 1fr; max-width: 480px; }
}

.pricing-card-single {
    position: relative;
    background: var(--bg);
    border: 2px solid var(--border);
    overflow: hidden;
}

.pricing-card-single.pricing-card-featured {
    border-color: var(--accent);
}

.pricing-header {
    padding: 32px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.pricing-header h2 {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.price-dollar {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-dim);
}

.price-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 800;
    color: var(--text);
}

.price-unit {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-dim);
    margin-left: 4px;
}

.pricing-features-list {
    padding: 28px 32px;
}

.pricing-features-list h3 {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.pricing-features-list ul {
    list-style: none;
}

.pricing-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.pricing-features-list li:last-child {
    border-bottom: none;
}

.pricing-features-list li svg {
    width: 18px;
    height: 18px;
    color: var(--success);
    flex-shrink: 0;
}

.pricing-features-list li i {
    font-size: 16px;
    color: var(--success);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.pricing-cta {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    background: var(--accent);
    color: var(--bg) !important;
    border-radius: 50px;
    transition: background 0.2s;
}

.pricing-cta:hover {
    background: var(--accent-dim);
}

.pricing-info {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.pricing-info h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--accent);
}

.pricing-info p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* Savings callout */
.savings-callout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 12px 24px;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

.savings-callout i {
    font-size: 18px;
}

/* ==================== CTA SECTION ==================== */
.cta-section {
    position: relative;
    padding: 100px 24px;
    background: var(--bg);
    text-align: center;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

/* Speed lines pattern */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cline x1='0' y1='40' x2='60' y2='40' stroke='%23ffffff' stroke-opacity='0.015' stroke-width='1'/%3E%3Cline x1='100' y1='80' x2='180' y2='80' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='0.5'/%3E%3Cline x1='20' y1='120' x2='90' y2='120' stroke='%23ffffff' stroke-opacity='0.015' stroke-width='1'/%3E%3Cline x1='140' y1='160' x2='200' y2='160' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='0.5'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.cta-section > .container { position: relative; z-index: 1; }

.cta-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.cta-section p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 32px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 50px;
    transition: all 0.2s;
}

.btn-main:hover {
    background: var(--accent-dim);
    transform: translateY(-2px);
}

.btn-main i {
    font-size: 18px;
}

/* ==================== PAGE CTA (about page) ==================== */
.page-cta {
    padding: 100px 24px;
    background: var(--bg);
    text-align: center;
    border-top: 1px solid var(--border);
}

.page-cta h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.page-cta p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.page-cta .btn-primary {
    display: inline-flex;
}

/* ==================== PRICING FREE BANNER ==================== */
.pricing-free-banner {
    background: #22c55e;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    letter-spacing: 0.02em;
}
.pricing-free-banner i { margin-right: 4px; }

/* ==================== LEGAL SECTIONS ==================== */
.legal-section {
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-updated {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 20px;
    margin: 40px 0 16px;
    color: var(--text);
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-content ul {
    list-style: none;
    margin: 16px 0 24px;
}

.legal-content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--accent);
}

/* ==================== LIGHT THEME OVERRIDES ==================== */

/* Hide dark-mode textures in light */
[data-theme="light"] .about-section::before,
[data-theme="light"] .contact-section::before,
[data-theme="light"] .pricing-section::before,
[data-theme="light"] .cta-section::before {
    display: none;
}

/* Buttons stay white text on orange */
[data-theme="light"] .pricing-cta { color: #ffffff !important; }
[data-theme="light"] .btn-main { color: #ffffff; box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25); }
[data-theme="light"] .form-submit { color: #ffffff; }

/* Pricing card single */
[data-theme="light"] .pricing-card-single {
    background: #ffffff;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* --- ABOUT SECTION: clean white with subtle orange spotlight --- */
[data-theme="light"] .about-section {
    background: #ffffff;
    background-image: radial-gradient(ellipse 600px 300px at 50% 0, rgba(255,107,0,0.03) 0%, transparent 60%);
}
[data-theme="light"] .about-content h2 { color: var(--accent); }
[data-theme="light"] .about-content p { color: var(--text-muted); }
[data-theme="light"] .about-content ul li { color: var(--text-muted); }
[data-theme="light"] .about-content ul li strong { color: var(--text); }

/* --- VALUES GRID: gray field with floating white cards --- */
[data-theme="light"] .values-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #eef0f2 0%, #e8eaed 100%);
}
[data-theme="light"] .values-section > .container { position: relative; z-index: 1; }
[data-theme="light"] .value-card {
    background: #ffffff;
    border: none;
    border-left: 3px solid var(--accent);
    box-shadow: 0 6px 24px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .value-card:hover {
    box-shadow: 0 16px 48px rgba(255, 107, 0, 0.12), 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

/* --- CONTACT SECTION: white bg, premium form --- */
[data-theme="light"] .contact-section {
    background: #ffffff;
    background-image: radial-gradient(ellipse 500px 300px at 70% 50%, rgba(255,107,0,0.03) 0%, transparent 60%);
}
[data-theme="light"] .contact-detail {
    background: #f8f9fa;
    border: none;
    border-left: 3px solid var(--accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
[data-theme="light"] .contact-detail:hover {
    box-shadow: 0 8px 30px rgba(255, 107, 0, 0.1), 0 4px 16px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
[data-theme="light"] .contact-form {
    background: #f8f9fa;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}

/* --- FEATURES PAGE: white bg with orange accented blocks --- */
[data-theme="light"] .features-page-section {
    background: #ffffff;
    background-image: radial-gradient(ellipse 700px 400px at 30% 50%, rgba(255,107,0,0.03) 0%, transparent 60%);
}
[data-theme="light"] .feature-block { border-bottom-color: #eef0f2; }
[data-theme="light"] .feature-block .feature-icon {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.05));
    border: 1px solid rgba(255, 107, 0, 0.2);
}
[data-theme="light"] .feature-block:hover .feature-icon {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.15);
}

/* --- STEPS SECTION: alternating gray with step number pop --- */
[data-theme="light"] .steps-section {
    background: linear-gradient(180deg, #f4f5f7 0%, #eef0f2 100%);
}
[data-theme="light"] .step-row { border-bottom-color: #dfe2e6; }
[data-theme="light"] .step-num { color: rgba(255, 107, 0, 0.15); }
[data-theme="light"] .step-content h2 { color: var(--accent); }
[data-theme="light"] .step-image img {
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,107,0,0.1);
}

/* --- PRICING SECTION (inner page): gray bg with floating card --- */
[data-theme="light"] .pricing-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eef0f2 0%, #e8eaed 100%);
    background-image: radial-gradient(ellipse 500px 300px at 50% 40%, rgba(255,107,0,0.05) 0%, transparent 60%);
}
[data-theme="light"] .pricing-section > .container { position: relative; z-index: 1; }
[data-theme="light"] .pricing-card-single {
    background: #ffffff;
    border: 2px solid var(--border);
    box-shadow: 0 12px 48px rgba(255, 107, 0, 0.1), 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .pricing-card-single.pricing-card-featured {
    border-color: var(--accent);
}
[data-theme="light"] .pricing-features-list li { border-bottom-color: #eef0f2; }

/* --- CTA SECTIONS: light gray with orange glow spotlight --- */
[data-theme="light"] .cta-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f4f5f7 0%, #eef0f2 100%);
    background-image: radial-gradient(ellipse 500px 250px at 50% 50%, rgba(255,107,0,0.05) 0%, transparent 60%);
}
[data-theme="light"] .cta-section > .container { position: relative; z-index: 1; }
[data-theme="light"] .page-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f4f5f7 0%, #eef0f2 100%);
    background-image: radial-gradient(ellipse 500px 250px at 50% 50%, rgba(255,107,0,0.05) 0%, transparent 60%);
}

/* Speed-line textures on gray sections */
[data-theme="light"] .values-section::after,
[data-theme="light"] .pricing-section::after,
[data-theme="light"] .cta-section::after,
[data-theme="light"] .page-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cline x1='0' y1='30' x2='80' y2='30' stroke='%23ff6b00' stroke-opacity='0.04' stroke-width='1'/%3E%3Cline x1='120' y1='70' x2='200' y2='70' stroke='%23ff6b00' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='40' y1='110' x2='160' y2='110' stroke='%23ff6b00' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='0' y1='150' x2='100' y2='150' stroke='%23ff6b00' stroke-opacity='0.04' stroke-width='1'/%3E%3Cline x1='150' y1='190' x2='200' y2='190' stroke='%23ff6b00' stroke-opacity='0.02' stroke-width='0.5'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Racing divider visible */
[data-theme="light"] .racing-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(255,107,0,0.25) 20%, rgba(255,107,0,0.25) 80%, transparent 100%);
}

/* Page tag badge */
[data-theme="light"] .page-tag {
    background: rgba(255, 107, 0, 0.08);
    border-color: rgba(255, 107, 0, 0.2);
}

/* Form inputs */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
    background: #ffffff;
    border: 1px solid #d0d5db;
    color: var(--text);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.08);
}

/* CTA button stays white text */
[data-theme="light"] .btn-main { color: #ffffff; box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3); }
[data-theme="light"] .page-cta .btn-primary { color: #ffffff; box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3); }

/* ==================== CAR TIPS ==================== */
.tips-section {
    position: relative;
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* Carbon fiber pattern */
.tips-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ffffff' fill-opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Subtle top gradient glow */
.tips-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(ellipse 800px 200px at 50% 0, rgba(255,107,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.tips-section > .container { position: relative; z-index: 1; }

.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.tip-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    padding: 28px 24px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}

.tip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 107, 0, 0.12), 0 4px 12px rgba(0,0,0,0.2);
    border-color: var(--accent);
}

.tip-card .tip-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.tip-card .tip-category {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    padding: 4px 10px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.tip-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.3;
}

.tip-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}

.tip-card .tip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}

.tip-card .tip-link:hover {
    gap: 10px;
    color: #16a34a;
}

.tip-card .tip-link svg {
    width: 14px;
    height: 14px;
}

/* --- Tip Article Page --- */
.tip-article-section {
    position: relative;
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.tip-article-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ffffff' fill-opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Subtle top gradient glow */
.tip-article-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(ellipse 800px 200px at 50% 0, rgba(255,107,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.tip-article-section > .container { position: relative; z-index: 1; }

.tip-article {
    max-width: 760px;
    margin: 0 auto;
}

.tip-article-hero-img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.tip-article h2 {
    font-size: 22px;
    margin: 40px 0 16px;
    color: var(--accent);
}

.tip-article h2:first-child {
    margin-top: 0;
}

.tip-article p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.tip-article strong {
    color: var(--text);
}

.tip-article ul, .tip-article ol {
    margin: 16px 0 24px;
    padding-left: 0;
    list-style: none;
}

.tip-article ul li, .tip-article ol li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
}

.tip-article ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    background: var(--accent);
}

.tip-article ol {
    counter-reset: tip-counter;
}

.tip-article ol li {
    counter-increment: tip-counter;
}

.tip-article ol li::before {
    content: counter(tip-counter) '.';
    position: absolute;
    left: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
}

.tip-article blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--accent);
    background: rgba(255, 107, 0, 0.04);
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    font-style: italic;
}

.tip-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    text-decoration: none;
    margin-bottom: 32px;
    transition: gap 0.2s, color 0.2s;
}

.tip-back-link:hover {
    gap: 10px;
    color: #16a34a;
}

/* --- Light Theme: Car Tips --- */
[data-theme="light"] .tips-section::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ff6b00' fill-opacity='0.045'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ff6b00' fill-opacity='0.03'/%3E%3C/svg%3E");
}
[data-theme="light"] .tips-section::after {
    background: radial-gradient(ellipse 800px 200px at 50% 0, rgba(255,107,0,0.05) 0%, transparent 70%);
}
[data-theme="light"] .tip-article-section::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ff6b00' fill-opacity='0.045'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ff6b00' fill-opacity='0.03'/%3E%3C/svg%3E");
}
[data-theme="light"] .tip-article-section::after {
    background: radial-gradient(ellipse 800px 200px at 50% 0, rgba(255,107,0,0.05) 0%, transparent 70%);
}

[data-theme="light"] .tips-section {
    background: #f8f9fa;
}

[data-theme="light"] .page-hero {
    background: #0a0a0a;
}

[data-theme="light"] .tip-card {
    background: #ffffff;
    border: none;
    border-top: 3px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

[data-theme="light"] .tip-card:hover {
    box-shadow: 0 16px 48px rgba(255, 107, 0, 0.12), 0 4px 16px rgba(0,0,0,0.06);
}

[data-theme="light"] .tip-article-section {
    background: #f8f9fa;
}

[data-theme="light"] .tip-article blockquote {
    background: rgba(255, 107, 0, 0.04);
    border-left-color: var(--accent);
}

[data-theme="light"] .tip-article-hero-img {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 24px;
    }

    .contact-links {
        flex-wrap: wrap;
    }

    .feature-block {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .feature-block .feature-icon {
        margin: 0 auto;
    }

    .step-row,
    .step-row.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .step-image {
        order: -1;
    }

    .step-image img {
        max-width: 260px;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================
   NEWS PAGE
   ============================ */

.news-page-section {
    padding: 80px 0;
    background: var(--bg);
}

.news-category {
    margin-bottom: 56px;
}

.news-category:last-child {
    margin-bottom: 0;
}

.news-category-header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.news-category-header h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.news-full-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .news-full-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .news-full-grid { grid-template-columns: 1fr; }
}

/* ============================
   NEWS ARTICLE READER
   ============================ */

.article-content-section {
    position: relative;
    background: var(--bg-card);
    min-height: 60vh;
    padding-top: 40px;
    padding-bottom: 40px;
}

.article-content-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%23ffffff' fill-opacity='0.012'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.article-content-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(ellipse 800px 200px at 50% 0, rgba(255,107,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.article-content-section > .proxied-article { position: relative; z-index: 1; }

.article-reader-bar {
    position: relative;
    z-index: 99;
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--accent);
    border-top: 2px solid var(--accent);
    padding: 14px 0;
}

.article-reader-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.2s;
}

.article-reader-back:hover {
    gap: 12px;
    color: var(--accent);
}

.article-reader-source {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.article-reader-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.article-reader-external:hover {
    color: var(--accent);
}

.article-reader-frame {
    width: 100%;
    height: calc(100vh - 130px);
    background: #ffffff;
}

.article-reader-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .article-reader-source { display: none; }
    .article-reader-bar { top: 60px; }
    .article-reader-frame { height: calc(100vh - 110px); }
}

/* ==================== PAGE SECTION (generic content block) ==================== */
.page-section {
    padding: 60px 0;
    background: var(--bg);
}

.page-section .container {
    max-width: 900px;
    margin: 0 auto;
}

.page-section h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

/* Google Play badge */
.gp-badge {
    display: inline-block;
    margin-top: 20px;
}

.gp-badge img {
    height: 54px;
}

.gp-badge-nav {
    margin-top: 0;
}

.gp-badge-nav img {
    height: 40px;
}

/* VIN check standalone page — single column, not the homepage 2-col grid */
.vin-check-standalone .container {
    display: block;
    max-width: 700px;
    margin: 0 auto;
}

.vin-check-standalone .vin-check-content {
    width: 100%;
}

.vin-check-standalone .vin-input-wrapper {
    max-width: 100%;
}

.vin-check-standalone .vin-check-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 36px;
}

.page-section p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 12px;
}

.page-section p strong {
    color: #fff;
}

.page-hero-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}

/* ==================== FAQ LIST ==================== */
.faq-list {
    max-width: 800px;
}

.faq-item {
    margin-bottom: 2rem;
}

.faq-item h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.faq-item p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 15px;
}

/* ==================== VIN CHECK STANDALONE PAGE ==================== */
.vin-results {
    margin-top: 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    padding: 24px;
}

.vin-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.vin-results-header h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: #fff;
    margin: 0;
}

.vin-results-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}
.vin-results-close:hover { color: #fff; }

.vin-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.vin-result-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 20px;
    transition: border-color 0.2s;
}
.vin-result-card:hover { border-color: var(--accent); }

.vin-result-icon {
    color: var(--accent);
    margin-bottom: 12px;
}

.vin-result-card h4 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.vin-result-data {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.vin-results-cta {
    text-align: center;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
}

.vin-results-cta p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.vin-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.vin-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: vin-spin 0.8s linear infinite;
}

@keyframes vin-spin {
    to { transform: rotate(360deg); }
}

.vin-error {
    padding: 16px;
    color: #ff4444;
    background: rgba(255, 68, 68, 0.08);
    border: 1px solid rgba(255, 68, 68, 0.2);
    font-size: 14px;
    margin-top: 16px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover {
    background: var(--accent-dim);
    color: #fff;
    transform: translateY(-2px);
}

.btn-large {
    padding: 16px 36px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .vin-results-grid { grid-template-columns: 1fr; }
    .page-section { padding: 40px 0; }
}

/* Light theme overrides */
[data-theme="light"] .page-section h2 { color: var(--text); }
[data-theme="light"] .faq-item h3 { color: var(--text); }
[data-theme="light"] .vin-results { background: rgba(0,0,0,0.02); }
[data-theme="light"] .vin-result-card { background: #fff; }
[data-theme="light"] .vin-result-card h4 { color: var(--text); }
[data-theme="light"] .vin-results-header h3 { color: var(--text); }
[data-theme="light"] .btn-primary { color: #fff; box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3); }