/* SPC home page (templates/cms/home.template.html) */
.spc-home {
	--spc-navy: #192d38;
	--spc-blue: #1ba3dc;
	--spc-blue-dark: #1386b8;
	--spc-ink: #1f2a30;
	--spc-muted: #5b6a72;
	--spc-line: #e3e8eb;
	--spc-soft: #f4f7f9;
	color: var(--spc-ink);
}
.spc-home h1, .spc-home h2 { font-weight: 600; letter-spacing: -0.01em; }

/* Buttons */
.spc-btn {
	display: inline-block; padding: 12px 22px; border-radius: 6px; border: 2px solid transparent;
	font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.spc-btn:hover, .spc-btn:focus { text-decoration: none; }
.spc-btn-accent { background: var(--spc-blue); color: #fff; }
.spc-btn-accent:hover, .spc-btn-accent:focus { background: var(--spc-blue-dark); color: #fff; }
.spc-btn-primary { background: var(--spc-navy); color: #fff; }
.spc-btn-primary:hover, .spc-btn-primary:focus { background: #24414f; color: #fff; }
.spc-btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.spc-btn-ghost:hover, .spc-btn-ghost:focus { background: #fff; color: var(--spc-navy); }
.spc-btn-block { display: block; width: 100%; }
.spc-login-jump { display: none; }
html { scroll-behavior: smooth; }
#spc-login { scroll-margin-top: 12px; }

/* Hero (guests) */
.spc-hero {
	background-color: var(--spc-navy);
	background-image: linear-gradient(90deg, rgba(16,30,38,.82) 0%, rgba(16,30,38,.55) 50%, rgba(16,30,38,.2) 100%), url('../img/hero/landcruiser.jpg');
	background-size: cover; background-position: center 80%;
	color: #fff; padding: 56px 0;
}
.spc-hero h1, .spc-lead, .spc-eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.spc-hero-copy { padding-bottom: 24px; }
.spc-eyebrow { color: var(--spc-blue); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin: 0 0 8px; }
.spc-hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; color: #fff; }
.spc-lead { font-size: 18px; line-height: 1.5; color: #e6edf0; margin: 0 0 24px; max-width: 560px; }
.spc-hero-ctas .spc-btn { margin: 0 8px 8px 0; }
.spc-login { background: #fff; color: var(--spc-ink); border-radius: 10px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.spc-login h2 { font-size: 22px; margin: 0 0 16px; }
.spc-login label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.spc-login .form-control { height: 44px; font-size: 16px; margin-bottom: 14px; border-radius: 6px; }
.spc-forgot { display: block; text-align: center; margin-top: 12px; font-size: 14px; }

/* Dealer bar (logged in) */
.spc-dealer-bar { background: var(--spc-navy); color: #fff; padding: 20px 0; }
.spc-dealer-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.spc-dealer-hi { font-size: 20px; font-weight: 600; margin: 0; }
.spc-dealer-links .spc-btn { margin: 4px 8px 4px 0; }

/* USP strip */
.spc-usps { background: var(--spc-soft); border-bottom: 1px solid var(--spc-line); padding: 18px 0; }
.spc-usps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.spc-usps li { flex: 1 1 33%; padding: 6px 16px; border-left: 3px solid var(--spc-blue); margin: 4px 0; }
.spc-usps strong { display: block; font-size: 16px; }
.spc-usps span { color: var(--spc-muted); font-size: 14px; }

/* Sections */
.spc-section { padding: 40px 0; }
.spc-section-alt { background: var(--spc-soft); }
.spc-h2 { font-size: 28px; margin: 0 0 20px; }
.spc-center { text-align: center; margin-top: 24px; }
.spc-small { font-size: 14px; color: var(--spc-muted); margin-top: 12px; }

/* Category tiles, grouped by department */
.spc-cat-group + .spc-cat-group { margin-top: 28px; }
.spc-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--spc-navy); padding-bottom: 6px; margin-bottom: 14px; }
.spc-cat-head h3 { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--spc-navy); }
.spc-cat-head a { font-size: 14px; font-weight: 600; color: var(--spc-blue-dark); white-space: nowrap; }
.spc-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.spc-cat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--spc-line); border-radius: 10px; overflow: hidden; color: var(--spc-ink); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.spc-cat:hover, .spc-cat:focus { border-color: var(--spc-blue); box-shadow: 0 6px 18px rgba(25,45,56,.12); text-decoration: none; color: var(--spc-ink); }
.spc-cat-img { display: block; aspect-ratio: 1 / 1; padding: 8px; }
.spc-cat-img img { width: 100%; height: 100%; object-fit: contain; }
.spc-cat-name { display: block; flex: 1; padding: 10px; border-top: 1px solid var(--spc-line); font-weight: 600; font-size: 15px; line-height: 1.25; }

/* Brand logos */
.spc-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.spc-brands a { flex: 0 1 calc((100% - 36px) / 4); display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px 20px; border: 1px solid var(--spc-line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.spc-brands a:hover, .spc-brands a:focus { border-color: var(--spc-blue); box-shadow: 0 6px 18px rgba(25,45,56,.12); }
.spc-brands img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }

/* Steps */
.spc-steps { list-style: none; counter-reset: spc; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spc-steps li { counter-increment: spc; background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--spc-line); }
.spc-steps li:before { content: counter(spc); display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--spc-blue); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 10px; }
.spc-steps strong { display: block; font-size: 18px; margin-bottom: 4px; }
.spc-steps span { color: var(--spc-muted); }

@media (max-width: 991px) {
	.spc-hero h1 { font-size: 32px; }
	.spc-hero-ctas .spc-login-jump { display: inline-block; }
	.spc-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.spc-hero { padding: calc(66.7vw - 24px) 0 28px; background: linear-gradient(180deg, rgba(25,45,56,0) 0, rgba(25,45,56,0) calc(66.7vw - 90px), var(--spc-navy) 66.7vw) no-repeat, url('../img/hero/landcruiser-m.jpg') center top / auto 66.7vw no-repeat, var(--spc-navy); }
	.spc-hero h1 { font-size: 28px; }
	.spc-lead { font-size: 16px; }
	.spc-hero-ctas .spc-btn { display: block; margin: 0 0 10px; }
	.spc-hero-ctas .spc-login-jump { display: block; }
	.spc-usps li { flex-basis: 100%; }
	.spc-section { padding: 28px 0; }
	.spc-h2 { font-size: 23px; }
	.spc-cats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.spc-cat-img { padding: 4px; }
	.spc-cat-name { font-size: 13px; padding: 7px 6px; text-align: center; }
	.spc-cat-head h3 { font-size: 16px; }
	.spc-steps { grid-template-columns: 1fr; }
	.spc-brands { gap: 8px; }
	.spc-brands a { flex-basis: calc((100% - 8px) / 2); height: 72px; padding: 10px 14px; }
	.spc-brands img { max-height: 40px; }
}