/* ==========================================================================
   AutoShift — Homepage Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Section
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-bg);
}

/* Three.js canvas */
#hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.2s ease;
}

#hero-canvas.is-ready { opacity: 1; }

/* Fallback gradient shown when WebGL unavailable or on mobile */
.hero__bg-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 70% 50%, rgba(212, 175, 55, 0.07) 0%, transparent 60%),
		radial-gradient(ellipse 50% 80% at 30% 80%, rgba(37, 99, 235, 0.06) 0%, transparent 55%),
		var(--color-bg);
}

/* Animated grid lines (subtle texture) */
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Vignette overlay */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(7, 9, 13, 0.6) 100%);
	pointer-events: none;
}

/* Bottom fade to next section */
.hero__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(to bottom, transparent, var(--color-bg));
	pointer-events: none;
	z-index: 2;
}

/* Content layer */
.hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-block: clamp(var(--space-24), 12vw, var(--space-32));
	padding-top: calc(76px + clamp(var(--space-16), 8vw, var(--space-24)));
}

.hero__inner {
	max-width: 760px;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.hero__eyebrow-line {
	width: 32px;
	height: 1px;
	background: var(--color-gold);
}

.hero__headline {
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	font-weight: var(--fw-black);
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-6);
}

.hero__headline em {
	font-style: normal;
	color: var(--color-gold);
	display: block;
}

.hero__subtitle {
	font-size: var(--text-xl);
	font-weight: var(--fw-light);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	max-width: 52ch;
	margin-bottom: var(--space-10);
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Scroll indicator */
.hero__scroll {
	position: absolute;
	bottom: calc(var(--space-8) + 40px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.hero__scroll-label {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-dim);
}

.hero__scroll-mouse {
	width: 22px;
	height: 34px;
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 11px;
	display: flex;
	justify-content: center;
	padding-top: 6px;
}

.hero__scroll-dot {
	width: 3px;
	height: 8px;
	background: var(--color-gold);
	border-radius: 2px;
	animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60%       { transform: translateY(10px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. Trust Bar
   -------------------------------------------------------------------------- */

.trust-bar {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.trust-bar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.trust-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-4);
	position: relative;
}

.trust-bar__item + .trust-bar__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var(--color-border);
}

.trust-bar__number {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--fw-black);
	color: var(--color-gold);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-2);
}

.trust-bar__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	max-width: 16ch;
}

/* --------------------------------------------------------------------------
   3. About Preview
   -------------------------------------------------------------------------- */

.about-preview {
	overflow: hidden;
}

.about-preview__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-12), 6vw, var(--space-20));
	align-items: center;
}

.about-preview__content {
	max-width: 52ch;
}

.about-preview__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
	line-height: var(--leading-relaxed);
}

.about-preview__feature-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.about-preview__feature {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.about-preview__feature::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gold);
	flex-shrink: 0;
}

.about-preview__image {
	position: relative;
}

.about-preview__image img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: var(--radius-xl);
}

/* Gold accent frame */
.about-preview__image::before {
	content: '';
	position: absolute;
	inset: -16px -16px 16px 16px;
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: var(--radius-xl);
	pointer-events: none;
}

/* Experience badge */
.about-preview__badge {
	position: absolute;
	bottom: var(--space-6);
	left: calc(-1 * var(--space-8));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	box-shadow: var(--shadow-xl);
}

.about-preview__badge-number {
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: var(--fw-black);
	color: var(--color-gold);
	line-height: 1;
}

.about-preview__badge-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

/* --------------------------------------------------------------------------
   4. Services
   -------------------------------------------------------------------------- */

.services-section {
	background: var(--color-surface);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

.service-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-6);
	transition: border-color var(--transition-base),
	            box-shadow var(--transition-base),
	            transform var(--transition-base);
}

.service-card:hover {
	border-color: rgba(212, 175, 55, 0.25);
	box-shadow: var(--shadow-gold);
	transform: translateY(-6px);
}

.service-card__icon {
	width: 52px;
	height: 52px;
	background: var(--color-gold-dim);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
	color: var(--color-gold);
	transition: background var(--transition-base), transform var(--transition-spring);
}

.service-card:hover .service-card__icon {
	background: var(--color-gold);
	color: var(--color-bg);
	transform: scale(1.1);
}

.service-card__icon svg { width: 24px; height: 24px; }

.service-card__title {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-3);
}

.service-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   5. Brands
   -------------------------------------------------------------------------- */

.brands-section { background: var(--color-bg); }

.brands-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-3);
}

.brand-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-muted);
	text-align: center;
	transition: all var(--transition-base);
	cursor: default;
}

.brand-pill:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
	background: var(--color-gold-dim);
	transform: translateY(-3px);
	box-shadow: var(--shadow-gold);
}

/* --------------------------------------------------------------------------
   6. Why Choose AutoShift
   -------------------------------------------------------------------------- */

.why-section {
	background: var(--color-surface);
	position: relative;
	overflow: hidden;
}

/* Decorative background */
.why-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

.why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-12), 6vw, var(--space-20));
	align-items: center;
}

.why-content { }

.why-features {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.why-feature {
	display: flex;
	gap: var(--space-5);
}

.why-feature__icon {
	width: 44px;
	height: 44px;
	background: var(--color-gold-dim);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gold);
	flex-shrink: 0;
	transition: background var(--transition-base);
}

.why-feature:hover .why-feature__icon {
	background: var(--color-gold);
	color: var(--color-bg);
}

.why-feature__icon svg { width: 20px; height: 20px; }

.why-feature__title {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-1);
}

.why-feature__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

/* Why image panel */
.why-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why-visual__image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-xl);
}

.why-visual__overlay {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-xl);
	background: linear-gradient(135deg, transparent 60%, rgba(212, 175, 55, 0.1));
}

/* Decorative visual (when no image) */
.why-visual__inner {
	position: relative;
	width: 380px;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why-visual__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 55, 0.2);
	animation: ring-pulse 4s ease-in-out infinite;
}

.why-visual__ring--outer {
	width: 360px;
	height: 360px;
	border-color: rgba(212, 175, 55, 0.12);
	animation-delay: 0s;
}

.why-visual__ring--inner {
	width: 260px;
	height: 260px;
	border-color: rgba(212, 175, 55, 0.2);
	animation-delay: 1s;
}

@keyframes ring-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.5; transform: scale(1.03); }
}

.why-visual__emblem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-surface);
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: 50%;
	width: 140px;
	height: 140px;
	justify-content: center;
	box-shadow: 0 0 40px rgba(212, 175, 55, 0.08);
}

.why-visual__emblem-text {
	font-size: var(--text-xs);
	color: var(--color-gold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

/* Corner badges on the visual */
.why-visual__badge {
	position: absolute;
	background: var(--color-surface);
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	text-align: center;
	min-width: 72px;
}

.why-visual__badge--tl { top: 16px;    left: 16px;    }
.why-visual__badge--tr { top: 16px;    right: 16px;   }
.why-visual__badge--bl { bottom: 16px; left: 16px;    }
.why-visual__badge--br { bottom: 16px; right: 16px;   }

.why-visual__badge-value {
	display: block;
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: var(--color-gold);
	line-height: 1;
}

.why-visual__badge-label {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. Testimonials
   -------------------------------------------------------------------------- */

.testimonials-section { background: var(--color-bg); }

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.testimonial-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card:hover {
	border-color: rgba(212, 175, 55, 0.2);
	box-shadow: var(--shadow-gold);
}

.testimonial-card__stars {
	display: flex;
	gap: var(--space-1);
	color: var(--color-gold);
}

.testimonial-card__stars svg { width: 16px; height: 16px; fill: currentColor; }

.testimonial-card__quote {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	font-style: italic;
	flex: 1;
}

.testimonial-card__quote::before { content: '\201C'; color: var(--color-gold); font-size: 2em; line-height: 0; vertical-align: -0.4em; margin-right: 4px; }

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.testimonial-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--text-base);
	color: var(--color-gold);
	flex-shrink: 0;
	border: 1px solid rgba(212, 175, 55, 0.2);
}

.testimonial-card__name {
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.testimonial-card__vehicle {
	font-size: var(--text-xs);
	color: var(--color-text-dim);
}

/* --------------------------------------------------------------------------
   8. Final CTA
   -------------------------------------------------------------------------- */

.cta-final {
	background: var(--color-surface);
	position: relative;
	overflow: hidden;
}

.cta-final::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 80% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 40% 60% at 10% 50%, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
	pointer-events: none;
}

.cta-final__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}

.cta-final__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-4);
}

.cta-final__title span { color: var(--color-gold); }

.cta-final__text {
	font-size: var(--text-xl);
	color: var(--color-text-muted);
	margin-bottom: var(--space-10);
}

.cta-final__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.cta-final__contact {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.cta-final__contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.cta-final__contact-item svg { width: 16px; height: 16px; color: var(--color-gold); flex-shrink: 0; }
.cta-final__contact-item a { color: inherit; }
.cta-final__contact-item:hover, .cta-final__contact-item a:hover { color: var(--color-text); }

.cta-final__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.cta-final__reassurance {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-8);
	list-style: none;
	padding: 0;
	margin: 0;
}

.cta-final__reassurance li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive — Tablet (≤1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.trust-bar__grid    { grid-template-columns: repeat(2, 1fr); }
	.services-grid      { grid-template-columns: repeat(2, 1fr); }
	.brands-grid        { grid-template-columns: repeat(3, 1fr); }
	.about-preview__grid{ grid-template-columns: 1fr; }
	.about-preview__image { order: -1; }
	.about-preview__badge { left: var(--space-4); }
	.why-grid           { grid-template-columns: 1fr; }
	.why-visual         { display: none; }
	.testimonials-grid  { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile (≤767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.hero__headline     { font-size: clamp(2.2rem, 10vw, 3rem); }
	.hero__subtitle     { font-size: var(--text-base); }
	.trust-bar__grid    { grid-template-columns: repeat(2, 1fr); }
	.trust-bar__item + .trust-bar__item::before { display: none; }
	.services-grid      { grid-template-columns: 1fr; }
	.brands-grid        { grid-template-columns: repeat(2, 1fr); }
	.testimonials-grid  { grid-template-columns: 1fr; }
	.hero__scroll       { display: none; }
	#hero-canvas        { display: none; } /* Use fallback on mobile */
}