/* Sussex Autos main styles */
:root {
	--sa-bg: #0c0d0f;
	--sa-bg-metal: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,0.06), transparent 60%),
		linear-gradient(180deg, #121317 0%, #0b0b0d 100%);
	--sa-surface: #17181c;
	--sa-border: #2a2c31;
	--sa-text: #eef1f5;
	--sa-text-dim: #c7cbd3;
	--sa-red: #d4111a;
	--sa-red-2: #ff2a3a;
	--sa-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

html, body {
	background: var(--sa-bg);
	background-image: var(--sa-bg-metal);
	color: var(--sa-text);
	font-family: 'Montserrat', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	line-height: 1.6;
}

.sa-container { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* Header */
.sa-header { position: sticky; top: 0; z-index: 50; background: rgba(12,13,15,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sa-border); }
.sa-header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width: 1200px; margin: 0 auto; padding: 12px 24px; }
.sa-logo-text { font-weight: 800; font-size: 20px; letter-spacing: 0.5px; color: var(--sa-text); text-transform: uppercase; }
.sa-menu { display:flex; gap: 20px; list-style:none; margin:0; padding:0; }
.sa-menu a { color: var(--sa-text-dim); text-decoration:none; font-weight:600; transition: color .2s ease; }
.sa-menu a:hover { color: var(--sa-text); }
.sa-header-cta { display:flex; gap:10px; align-items:center; }
.sa-burger { display:none; width:44px; height:44px; border:1px solid var(--sa-border); background:transparent; border-radius:10px; position:relative; }
.sa-burger span { position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .2s ease, top .2s ease, opacity .2s ease; }
.sa-burger span:nth-child(1){ top:14px; }
.sa-burger span:nth-child(2){ top:21px; }
.sa-burger span:nth-child(3){ top:28px; }
.sa-mobile-menu { background:#0f1013; border-top:1px solid var(--sa-border); }
.sa-mobile-list { list-style:none; margin:0; padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.sa-mobile-list a { color:#fff; text-decoration:none; padding:10px 8px; border-radius:8px; background:rgba(255,255,255,0.04); }

/* Topbar */
.sa-topbar { background:#0a0a0c; border-bottom:1px solid var(--sa-border); }
.sa-topbar-inner { max-width:1200px; margin:0 auto; padding:6px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; color: var(--sa-text-dim); font-size: 13px; }
.sa-topbar a { color: var(--sa-text-dim); text-decoration:none; }
.sa-topbar a:hover { color: var(--sa-text); }
.sa-topbar-right { display:flex; align-items:center; gap:12px; }
.sa-top-item { padding:2px 6px; border-radius:8px; background: rgba(255,255,255,0.03); border:1px solid var(--sa-border); }
.sa-top-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--sa-border); background: rgba(255,255,255,0.04); color:#fff; text-decoration:none; font-size:12px; }

/* Buttons */
.sa-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:0.3px; background: linear-gradient(135deg, var(--sa-red), var(--sa-red-2)); box-shadow: 0 8px 24px rgba(212,17,26,0.35); transition: transform .08s ease, box-shadow .2s ease; border: none; cursor: pointer; }
.sa-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(212,17,26,0.5); }
.sa-btn--ghost { background: transparent; border: 1px solid var(--sa-red-2); color: #fff; }
.sa-btn--ghost:hover { background: linear-gradient(135deg, rgba(212,17,26,0.15), rgba(255,42,58,0.15)); }

/* Hero */
.sa-hero { position:relative; overflow:hidden; background:#0c0d10; border-bottom: 1px solid var(--sa-border); }
.sa-hero-inner { max-width:1200px; margin:0 auto; padding: 28px 24px 40px; display:grid; grid-template-columns: 1.1fr 1fr; gap:28px; align-items:center; }
.sa-hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.sa-hero p { margin: 0 0 18px; color: var(--sa-text-dim); }
.sa-hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.sa-slider { position:relative; border-radius:16px; overflow:hidden; box-shadow: var(--sa-shadow); border: 1px solid var(--sa-border); }
.sa-slides { position:relative; width:100%; height:0; padding-top:62%; }
.sa-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity .6s ease; }
.sa-slide.is-active { opacity:1; }
.sa-dots { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.sa-dot { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.9); cursor:pointer; }
.sa-dot.is-active { background: var(--sa-red-2); border-color: var(--sa-red-2); }

/* Sections */
.sa-section { padding: 56px 24px; border-top:1px solid var(--sa-border); border-bottom:1px solid var(--sa-border); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.sa-section h2 { font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 18px; }
.sa-grid { display:grid; gap:16px; }
.sa-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sa-card { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: 14px; padding: 18px; box-shadow: var(--sa-shadow); }
.sa-card h3 { margin: 0 0 8px; font-size: 18px; }
.sa-card p { margin: 0; color: var(--sa-text-dim); }

/* Testimonials */
.sa-testimonial { background: rgba(255,255,255,0.03); padding: 16px; border-radius: 12px; border:1px solid var(--sa-border); }

/* Gallery */
.sa-gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.sa-gallery img { width:100%; height: 220px; object-fit:cover; border-radius:12px; border:1px solid var(--sa-border); cursor:pointer; }

/* Lightbox */
.sa-lightbox { position: fixed; inset:0; background: rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index: 100; }
.sa-lightbox.is-open { display:flex; }
.sa-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; box-shadow: var(--sa-shadow); }
.sa-lightbox-close { position:absolute; top:20px; right:20px; background:#000; color:#fff; border:1px solid #444; border-radius:10px; padding:10px 12px; cursor:pointer; }

/* Footer */
.sa-footer { background:#0b0b0d; border-top:1px solid var(--sa-border); margin-top: 40px; }
.sa-footer-inner { max-width:1200px; margin:0 auto; padding: 28px 24px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sa-footer h4 { margin: 0 0 10px; }
.sa-contact-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; color: var(--sa-text-dim); }
.sa-socials { display:flex; gap:10px; }
.sa-social { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--sa-border); background: rgba(255,255,255,0.04); color:#fff; text-decoration:none; }

/* WhatsApp floating */
.sa-whatsapp { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #25D366, #1faa53); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow: 0 10px 24px rgba(37,211,102,0.45); font-weight:800; border: none; z-index: 60; }

/* Content */
.sa-content { padding-top: 24px; }
.sa-title { margin: 0 0 10px; }

/* Forms */
form.sa-form { display:grid; gap:12px; max-width:680px; }
.sa-input, .sa-textarea { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--sa-border); background:#0f1013; color:#fff; }
.sa-row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Pricing cards */
.sa-price-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-price { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: 14px; padding: 18px; text-align:center; }
.sa-price h3 { margin: 0 0 8px; }
.sa-muted { color: var(--sa-text-dim); }

/* Responsive */
@media (max-width: 980px) {
	.sa-hero-inner { grid-template-columns: 1fr; }
	.sa-gallery { grid-template-columns: repeat(3, 1fr); }
	.sa-footer-inner { grid-template-columns: 1fr; }
	.sa-price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.sa-menu { display:none; }
	.sa-burger { display:block; }
	.sa-grid--4 { grid-template-columns: 1fr 1fr; }
	.sa-grid--3 { grid-template-columns: 1fr 1fr; }
	.sa-grid--2 { grid-template-columns: 1fr; }
	.sa-gallery { grid-template-columns: repeat(2, 1fr); }
	.sa-row { grid-template-columns: 1fr; }
}