/* =========================================================
LoanVehicleCalculator.com V2
Premium Hybrid Flip Stylesheet
File: style.css
========================================================= */

/* ---------- CSS RESET ---------- */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
font-size: 16px;
}

body {
margin: 0;
font-family: Inter, Arial, Helvetica, sans-serif;
color: #172033;
background: #f6f8fb;
line-height: 1.6;
}

img {
max-width: 100%;
display: block;
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
select,
textarea {
font: inherit;
}

button {
cursor: pointer;
}

/* ---------- ROOT VARIABLES ---------- */

:root {
--navy: #10233f;
--navy-soft: #18375f;
--blue: #2563eb;
--blue-dark: #1d4ed8;
--sky: #eaf2ff;
--green: #10b981;
--green-dark: #059669;
--orange: #f59e0b;
--red: #ef4444;

--text: #172033;
--muted: #657289;
--light: #f6f8fb;
--white: #ffffff;
--border: #dfe7f1;

--shadow-sm: 0 4px 12px rgba(16, 35, 63, 0.08);
--shadow-md: 0 12px 30px rgba(16, 35, 63, 0.12);
--shadow-lg: 0 20px 50px rgba(16, 35, 63, 0.18);

--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;

--max-width: 1180px;
}

/* ---------- GLOBAL LAYOUT ---------- */

.container {
width: min(100% - 32px, var(--max-width));
margin: 0 auto;
}

.section {
padding: 80px 0;
}

.section-sm {
padding: 48px 0;
}

.section-title {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
}

.section-title span {
display: inline-block;
margin-bottom: 12px;
color: var(--blue);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8rem;
}

.section-title h2 {
margin: 0;
color: var(--navy);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
}

.section-title p {
margin: 16px 0 0;
color: var(--muted);
font-size: 1.05rem;
}

/* ---------- HEADER ---------- */

.site-header {
background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
}

.navbar {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 900;
color: var(--navy);
font-size: 1.15rem;
}

.logo-mark {
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, var(--blue), var(--green));
display: grid;
place-items: center;
color: var(--white);
font-weight: 900;
box-shadow: var(--shadow-sm);
}

.nav-links {
display: flex;
align-items: center;
gap: 22px;
color: var(--muted);
font-weight: 700;
font-size: 0.95rem;
}

.nav-links a:hover {
color: var(--blue);
}

.nav-cta {
background: var(--blue);
color: var(--white) !important;
padding: 12px 18px;
border-radius: 999px;
box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
background: var(--blue-dark);
color: var(--white) !important;
}

/* ---------- BUTTONS ---------- */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 999px;
padding: 14px 22px;
font-weight: 900;
transition: 0.2s ease;
}

.btn-primary {
background: var(--blue);
color: var(--white);
box-shadow: var(--shadow-md);
}

.btn-primary:hover {
background: var(--blue-dark);
transform: translateY(-2px);
}

.btn-secondary {
background: var(--white);
color: var(--navy);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
border-color: var(--blue);
color: var(--blue);
transform: translateY(-2px);
}

.btn-green {
background: var(--green);
color: var(--white);
box-shadow: var(--shadow-md);
}

.btn-green:hover {
background: var(--green-dark);
transform: translateY(-2px);
}

.btn-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}

/* ---------- HERO ---------- */

.hero {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 34%),
radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.16), transparent 32%),
linear-gradient(135deg, #f8fbff 0%, #eef5ff 55%, #f7fffb 100%);
padding: 82px 0 72px;
}

.hero-grid {
display: grid;
grid-template-columns: 1.04fr 0.96fr;
align-items: center;
gap: 48px;
}

.badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--white);
color: var(--blue);
border: 1px solid #cfe0ff;
padding: 8px 14px;
border-radius: 999px;
font-weight: 900;
font-size: 0.85rem;
box-shadow: var(--shadow-sm);
}

.hero h1 {
margin: 18px 0 18px;
color: var(--navy);
font-size: clamp(2.4rem, 5vw, 4.7rem);
line-height: 1;
letter-spacing: -0.04em;
}

.hero p {
color: var(--muted);
font-size: 1.15rem;
max-width: 640px;
margin: 0 0 28px;
}

.hero-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 28px;
}

.hero-point {
background: rgba(255, 255, 255, 0.86);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
box-shadow: var(--shadow-sm);
}

.hero-point strong {
display: block;
color: var(--navy);
font-size: 1.05rem;
}

.hero-point span {
color: var(--muted);
font-size: 0.9rem;
}

/* ---------- CALCULATOR CARD ---------- */

.calculator-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 28px;
}

.calculator-card h2,
.calculator-card h3 {
margin: 0 0 8px;
color: var(--navy);
line-height: 1.15;
}

.calculator-card p {
margin: 0 0 22px;
color: var(--muted);
}

.calc-form {
display: grid;
gap: 16px;
}

.form-group {
display: grid;
gap: 8px;
}

.form-group label {
color: var(--navy);
font-weight: 900;
font-size: 0.92rem;
}

.form-group input,
.form-group select {
width: 100%;
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 15px;
color: var(--text);
background: #fbfdff;
outline: none;
}

.form-group input:focus,
.form-group select:focus {
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.calc-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.result-box {
margin-top: 18px;
background: linear-gradient(135deg, var(--navy), var(--navy-soft));
color: var(--white);
border-radius: var(--radius-md);
padding: 22px;
}

.result-box span {
color: #bdd4ff;
font-weight: 800;
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.result-box strong {
display: block;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
margin-top: 8px;
}

.result-note {
margin-top: 10px !important;
color: #dce8ff !important;
font-size: 0.92rem !important;
}

.result-list {
display: grid;
gap: 10px;
margin-top: 16px;
}

.result-list div {
display: flex;
justify-content: space-between;
gap: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
padding-top: 10px;
}

.result-list b {
color: var(--white);
}

/* ---------- CARDS / GRIDS ---------- */

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

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

.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
}

.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
transition: 0.2s ease;
}

.card-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--sky);
color: var(--blue);
display: grid;
place-items: center;
font-weight: 900;
font-size: 1.3rem;
margin-bottom: 18px;
}

.card h3 {
margin: 0 0 10px;
color: var(--navy);
font-size: 1.28rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.card-link {
display: inline-flex;
margin-top: 18px;
color: var(--blue);
font-weight: 900;
}

.card-link:hover {
color: var(--blue-dark);
}

/* ---------- FEATURE SPLIT ---------- */

.split {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}

.split h2 {
color: var(--navy);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
margin: 0 0 18px;
}

.split p {
color: var(--muted);
margin: 0 0 18px;
}

.check-list {
display: grid;
gap: 14px;
margin: 26px 0;
}

.check-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--text);
font-weight: 700;
}

.check-item::before {
content: "✓";
flex: 0 0 26px;
height: 26px;
border-radius: 50%;
background: var(--green);
color: var(--white);
display: grid;
place-items: center;
font-size: 0.85rem;
font-weight: 900;
}

/* ---------- CTA BAND ---------- */

.cta-band {
background: linear-gradient(135deg, var(--navy), #0b172b);
color: var(--white);
border-radius: 30px;
padding: 44px;
box-shadow: var(--shadow-lg);
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}

.cta-band h2 {
margin: 0 0 10px;
font-size: clamp(1.8rem, 4vw, 3rem);
line-height: 1.1;
}

.cta-band p {
margin: 0;
color: #cddbf3;
max-width: 700px;
}

/* ---------- LENDER / OFFER CARDS ---------- */

.offer-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
display: grid;
gap: 14px;
}

.offer-top {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
}

.offer-name {
font-weight: 900;
color: var(--navy);
font-size: 1.2rem;
}

.offer-tag {
background: #ecfdf5;
color: var(--green-dark);
border: 1px solid #bff4dd;
padding: 6px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 0.8rem;
white-space: nowrap;
}

.offer-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.offer-meta div {
background: var(--light);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px;
}

.offer-meta span {
display: block;
color: var(--muted);
font-size: 0.8rem;
font-weight: 800;
}

.offer-meta strong {
color: var(--navy);
}

/* ---------- FAQ ---------- */

.faq {
display: grid;
gap: 14px;
max-width: 900px;
margin: 0 auto;
}

.faq details {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
}

.faq summary {
cursor: pointer;
color: var(--navy);
font-weight: 900;
list-style: none;
}

.faq summary::-webkit-details-marker {
display: none;
}

.faq summary::after {
content: "+";
float: right;
color: var(--blue);
font-size: 1.3rem;
line-height: 1;
}

.faq details[open] summary::after {
content: "–";
}

.faq p {
margin: 12px 0 0;
color: var(--muted);
}

/* ---------- ARTICLE / CONTENT PAGES ---------- */

.page-hero {
background: linear-gradient(135deg, #eff6ff, #f7fffb);
padding: 70px 0 56px;
border-bottom: 1px solid var(--border);
}

.page-hero-inner {
max-width: 850px;
}

.page-hero h1 {
margin: 16px 0;
color: var(--navy);
font-size: clamp(2.2rem, 5vw, 4.1rem);
line-height: 1;
letter-spacing: -0.035em;
}

.page-hero p {
color: var(--muted);
font-size: 1.12rem;
margin: 0;
}

.content-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 34px;
align-items: start;
}

.article {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-sm);
}

.article h2 {
color: var(--navy);
margin: 34px 0 12px;
font-size: 1.8rem;
line-height: 1.2;
}

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

.article h3 {
color: var(--navy);
margin: 26px 0 10px;
font-size: 1.32rem;
}

.article p,
.article li {
color: var(--muted);
}

.article ul,
.article ol {
padding-left: 22px;
}

.article a {
color: var(--blue);
font-weight: 800;
}

.sidebar {
position: sticky;
top: 98px;
display: grid;
gap: 18px;
}

.sidebar-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow-sm);
}

.sidebar-card h3 {
margin: 0 0 10px;
color: var(--navy);
}

.sidebar-card p {
margin: 0 0 16px;
color: var(--muted);
}

.sidebar-links {
display: grid;
gap: 10px;
}

.sidebar-links a {
color: var(--blue);
font-weight: 800;
}

/* ---------- TABLES ---------- */

.table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--white);
}

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
text-align: left;
}

th {
background: #eef5ff;
color: var(--navy);
font-weight: 900;
}

td {
color: var(--muted);
}

/* ---------- FOOTER ---------- */

.site-footer {
background: var(--navy);
color: var(--white);
padding: 56px 0 28px;
}

.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 34px;
margin-bottom: 34px;
}

.footer-logo {
font-weight: 900;
font-size: 1.25rem;
margin-bottom: 12px;
}

.footer-about p {
color: #cbd5e1;
margin: 0;
}

.footer-col h4 {
margin: 0 0 14px;
color: var(--white);
}

.footer-col a {
display: block;
color: #cbd5e1;
margin-bottom: 10px;
font-weight: 700;
}

.footer-col a:hover {
color: var(--white);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 22px;
color: #cbd5e1;
font-size: 0.9rem;
display: flex;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}

/* ---------- UTILITY CLASSES ---------- */

.bg-white {
background: var(--white);
}

.bg-light {
background: var(--light);
}

.text-center {
text-align: center;
}

.text-muted {
color: var(--muted);
}

.mt-0 {
margin-top: 0;
}

.mb-0 {
margin-bottom: 0;
}

.mt-24 {
margin-top: 24px;
}

.mt-36 {
margin-top: 36px;
}

.max-760 {
max-width: 760px;
}

.center {
margin-left: auto;
margin-right: auto;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 980px) {
.hero-grid,
.split,
.content-layout,
.cta-band {
grid-template-columns: 1fr;
}

.hero-points,
.grid-3,
.grid-2,
.offer-meta {
grid-template-columns: 1fr;
}

.sidebar {
position: static;
}

.nav-links {
display: none;
}

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

@media (max-width: 640px) {
.section {
padding: 58px 0;
}

.hero {
padding: 58px 0;
}

.calculator-card,
.article,
.card,
.cta-band {
padding: 24px;
}

.calc-grid-2 {
grid-template-columns: 1fr;
}

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

.footer-bottom {
display: block;
}

.btn,
.btn-row a,
.btn-row button {
width: 100%;
}

.offer-top {
display: grid;
}
}