/* =========================================================
   LUGIVO PERFORMANCE CAR RENTAL
   PREMIUM BLACK / GOLD
   COMPLETE CSS
========================================================= */

:root {
    --bg: #070707;
    --bg-soft: #0c0c0c;
    --card: #101010;
    --card-soft: #141414;
    --gold: #d7ad55;
    --gold-light: #f0d487;
    --gold-dark: #9d742c;
    --white: #ffffff;
    --text: #eeeeee;
    --muted: #999999;
    --border: rgba(255, 255, 255, 0.09);
    --gold-border: rgba(215, 173, 85, 0.55);
    --header-height: 96px;
    --nav-height: 92px;
    --radius: 22px;
    --radius-small: 15px;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { margin: 0; padding: 0; background: var(--bg); scroll-behavior: smooth; }
body {
    margin: 0; padding: 0;
    background: radial-gradient(circle at 50% -10%, rgba(215,173,85,.06), transparent 34%), var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    overflow-x: hidden;
}
body.lightbox-open { overflow: hidden; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding: calc(14px + env(safe-area-inset-top)) 22px 14px;
    display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; gap: 12px;
    background: linear-gradient(180deg,rgba(7,7,7,.99),rgba(7,7,7,.96));
    border-bottom: 1px solid rgba(215,173,85,.10);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.brand-button {
    appearance:none; min-width:0; border:0; background:transparent; color:var(--gold-light);
    font-size:27px; line-height:1; font-weight:800; letter-spacing:7px; text-align:center; padding:12px 0;
}
.header-icon-button {
    width:52px; height:52px; display:flex; align-items:center; justify-content:center; padding:0;
    border-radius:14px; border:1px solid var(--gold-border);
    background:linear-gradient(145deg,rgba(215,173,85,.13),rgba(255,255,255,.015));
    color:var(--gold-light); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.28);
    font-size:24px;
}
.header-back-button { justify-self:start; }
.header-back-button[hidden] { visibility:hidden; pointer-events:none; }
.header-menu-button { justify-self:end; font-size:25px; }

.app-content {
    min-height:100vh;
    padding-top:calc(var(--header-height) + env(safe-area-inset-top));
    padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px);
}
.app-page { display:none; min-height:calc(100vh - var(--header-height)); }
.app-page.active { display:block; }

.eyebrow { margin:0 0 14px; color:var(--gold-light); font-size:12px; line-height:1.4; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; }
.page-hero {
    padding:58px 30px 34px;
    background:radial-gradient(circle at 85% 10%,rgba(215,173,85,.08),transparent 30%),linear-gradient(180deg,#0c0c0c,#090909);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.page-hero h1 { margin:0 0 15px; color:var(--white); font-size:clamp(38px,10vw,58px); line-height:.98; font-weight:900; letter-spacing:-2px; }
.page-hero p:not(.eyebrow) { max-width:620px; margin:0; color:#b8b8b8; font-size:18px; line-height:1.55; }
.content-section { padding:28px 24px; }
.section-heading { margin-bottom:22px; }
.section-heading > span { display:block; margin-bottom:8px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:2px; }
.section-heading h2 { margin:0; color:var(--white); font-size:28px; line-height:1.12; }

.primary-button,.secondary-button {
    appearance:none; width:100%; min-height:58px; border-radius:16px; padding:16px 20px;
    font-size:14px; font-weight:900; letter-spacing:1.2px;
    transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease;
}
.primary-button {
    border:1px solid var(--gold-light);
    background:linear-gradient(135deg,#f1d889,#d2a448 58%,#ad7c29);
    color:#090909; box-shadow:0 12px 30px rgba(190,143,49,.20),inset 0 1px 0 rgba(255,255,255,.45);
}
.secondary-button {
    border:1px solid var(--gold-border);
    background:linear-gradient(145deg,rgba(215,173,85,.11),rgba(255,255,255,.015));
    color:var(--gold-light);
}
.primary-button:active,.secondary-button:active { transform:scale(.985); }
.primary-button:disabled,.secondary-button:disabled { opacity:.55; cursor:default; }

.home-hero { position:relative; width:100%; min-height:820px; overflow:hidden; background:#080808; }
.home-hero-background {
    position:absolute; top:0; left:0; right:0; height:650px;
    background-image:url("images/LUGIVO-Hero-Munich-RS3.png"); background-size:cover; background-position:58% center; background-repeat:no-repeat;
}
.home-hero-overlay {
    position:absolute; top:0; left:0; right:0; height:650px; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.18) 27%,rgba(0,0,0,.03) 55%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.82) 100%);
}
.home-hero-content { position:relative; z-index:2; min-height:820px; display:flex; flex-direction:column; padding:30px 31px 24px; }
.hero-top { position:relative; z-index:5; width:100%; flex:0 0 auto; }
.hero-top .eyebrow { display:block; margin:0 0 14px; color:var(--gold-light); font-size:12px; line-height:1.35; font-weight:900; letter-spacing:2.2px; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.95); }
.hero-top h1 { display:block; margin:0 0 13px; color:#fff; font-size:clamp(48px,12vw,70px); line-height:.92; font-weight:950; letter-spacing:-3px; text-shadow:0 3px 18px rgba(0,0,0,.80); }
.hero-subtitle { display:block; max-width:650px; margin:0; color:#fff; font-size:15px; line-height:1.45; font-weight:850; letter-spacing:1.8px; text-shadow:0 2px 12px rgba(0,0,0,.95); }
.hero-bottom { position:relative; z-index:5; margin-top:420px; padding:0; }
.hero-price { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; text-shadow:0 3px 12px rgba(0,0,0,.95); }
.hero-price span { color:var(--gold-light); font-size:12px; font-weight:900; letter-spacing:1.3px; }
.hero-price strong { color:var(--white); font-size:48px; line-height:1; font-weight:950; }
.hero-bottom .primary-button { position:relative; z-index:6; min-height:58px; box-shadow:0 14px 32px rgba(0,0,0,.34),0 10px 28px rgba(190,143,49,.18),inset 0 1px 0 rgba(255,255,255,.45); }
.hero-bottom .secondary-button { position:relative; z-index:6; min-height:56px; margin-top:10px; background:rgba(8,8,8,.90); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

.benefit-grid,.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.benefit-card,.quick-card {
    min-height:120px; border-radius:18px; border:1px solid rgba(215,173,85,.22);
    background:linear-gradient(145deg,rgba(215,173,85,.06),rgba(255,255,255,.015)); padding:18px; box-shadow:var(--shadow);
}
.benefit-card { display:flex; flex-direction:column; justify-content:flex-end; }
.benefit-card strong { margin-bottom:5px; color:var(--white); font-size:24px; }
.benefit-card span { color:var(--muted); font-size:13px; }
.quick-card { appearance:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; color:var(--white); }
.quick-card strong { font-size:18px; }
.quick-card span { color:var(--gold); font-size:12px; }

.vehicle-main-image-button { position:relative; width:100%; padding:0; overflow:hidden; border-radius:20px; border:1px solid var(--gold-border); background:#111; box-shadow:var(--shadow); }
.vehicle-main-image-button img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.image-counter { position:absolute; top:16px; left:16px; padding:10px 13px; background:rgba(7,7,7,.78); border:1px solid rgba(215,173,85,.30); border-radius:12px; color:var(--white); font-size:13px; font-weight:800; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.image-counter span { color:var(--gold-light); }
.fullscreen-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); white-space:nowrap; padding:7px 12px; background:rgba(0,0,0,.76); color:#fff; border-radius:30px; font-size:10px; font-weight:900; letter-spacing:1.4px; }
.vehicle-thumbnails { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:13px; }
.gallery-item { appearance:none; padding:0; overflow:hidden; border-radius:10px; border:1px solid transparent; background:#111; }
.gallery-item.active { border-color:var(--gold); }
.gallery-item img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.vehicle-spec-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:28px; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:#0d0d0d; }
.vehicle-spec-grid article { min-height:112px; display:flex; flex-direction:column; justify-content:center; padding:20px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.vehicle-spec-grid article:nth-child(2n) { border-right:0; }
.vehicle-spec-grid article:nth-last-child(-n+2) { border-bottom:0; }
.vehicle-spec-grid strong { color:var(--white); font-size:24px; }
.vehicle-spec-grid span { margin-top:7px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
.vehicle-actions { display:grid; gap:10px; margin-top:22px; }

.tariff-list { display:grid; gap:16px; }
.tariff-card,.info-card { border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(145deg,#121212,#0c0c0c); padding:22px; box-shadow:var(--shadow); }
.tariff-card.featured { border-color:var(--gold-border); background:radial-gradient(circle at 100% 0,rgba(215,173,85,.14),transparent 42%),#111; }
.tariff-label { color:var(--gold-light); font-size:11px; font-weight:900; letter-spacing:2px; }
.tariff-card h2 { margin:8px 0 20px; color:var(--white); font-size:24px; }
.tariff-price-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:13px 0; border-top:1px solid var(--border); }
.tariff-price-row span { color:var(--muted); }
.tariff-price-row strong { color:var(--white); font-size:21px; white-space:nowrap; }
.tariff-card .primary-button { margin-top:18px; }
.info-card h3 { color:var(--gold-light); }
.info-card p { color:#c7c7c7; }
.info-card hr { border:0; border-top:1px solid var(--border); }

.booking-section { display:grid; gap:20px; }
#bookingForm { display:grid; gap:20px; }
.booking-step { padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,#111,#0b0b0b); box-shadow:var(--shadow); }
.step-title { display:flex; gap:15px; align-items:center; margin-bottom:24px; }
.step-title > span { width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--gold); background:rgba(215,173,85,.08); color:var(--gold-light); font-weight:900; }
.step-title small { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:1.5px; }
.step-title h2 { margin:3px 0 0; color:var(--white); font-size:20px; }
.booking-step label { display:block; margin-bottom:17px; color:#cfcfcf; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; margin-top:8px; padding:15px 14px; border:1px solid rgba(215,173,85,.20); border-radius:13px; outline:none; background:#090909; color:var(--white); transition:border-color .18s ease,box-shadow .18s ease; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,173,85,.08); }
textarea { resize:vertical; }
.quote-card,.summary-card { margin:20px 0; overflow:hidden; border-radius:16px; border:1px solid var(--border); background:#090909; }
.quote-card > div,.summary-card > div { display:flex; justify-content:space-between; gap:20px; padding:14px 16px; border-bottom:1px solid var(--border); }
.quote-card > div:last-child,.summary-card > div:last-child { border-bottom:0; }
.quote-card span,.summary-card span { color:var(--muted); }
.quote-card strong,.summary-card strong { color:var(--white); text-align:right; }
.quote-total { background:rgba(215,173,85,.08); }
.quote-total strong { color:var(--gold-light); }
.validation-message { min-height:18px; margin:8px 0 14px; color:var(--gold-light); font-size:12px; line-height:1.45; }
.validation-message.error { color:#ff8e8e; }
.beta-notice { margin:15px 0 20px; padding:16px; border-radius:14px; border:1px solid rgba(215,173,85,.35); background:rgba(215,173,85,.07); }
.beta-notice strong { color:var(--gold-light); font-size:11px; letter-spacing:1.5px; }
.beta-notice p { margin:7px 0 0; color:#c7c7c7; font-size:12px; line-height:1.55; }
.file-field { padding:14px; border:1px solid var(--border); border-radius:14px; background:#0b0b0b; }
.file-field input { padding:10px; }
.file-field span { display:block; margin-top:8px; color:var(--gold); font-size:11px; word-break:break-word; }
.checkbox-row { display:flex !important; align-items:flex-start; gap:10px; }
.checkbox-row input { width:20px; height:20px; flex:0 0 20px; margin:1px 0 0; accent-color:var(--gold); }

.empty-state { min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 22px; text-align:center; border-radius:var(--radius); border:1px solid var(--gold-border); background:radial-gradient(circle at 50% 0,rgba(215,173,85,.11),transparent 40%),#0d0d0d; box-shadow:var(--shadow); }
.empty-state-icon { width:70px; height:70px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; border-radius:50%; border:1px solid var(--gold); background:rgba(215,173,85,.08); color:var(--gold-light); font-size:27px; font-weight:900; }
.empty-state h2 { margin:0 0 10px; color:var(--white); font-size:25px; }
.empty-state p { max-width:430px; margin:0 0 24px; color:var(--muted); line-height:1.6; }

.menu-list { display:grid; gap:11px; }
.menu-list button { width:100%; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; text-align:left; border-radius:17px; border:1px solid rgba(215,173,85,.20); background:linear-gradient(145deg,#121212,#0c0c0c); color:var(--white); box-shadow:0 8px 25px rgba(0,0,0,.20); }
.menu-list button span { display:flex; flex-direction:column; gap:5px; }
.menu-list strong { font-size:16px; }
.menu-list small { color:var(--muted); font-size:12px; }
.menu-list b { color:var(--gold-light); font-size:20px; }
.contact-card { margin-top:22px; padding:22px; border-radius:var(--radius); border:1px solid var(--gold-border); background:radial-gradient(circle at 100% 100%,rgba(215,173,85,.16),transparent 42%),#111; box-shadow:var(--shadow); }
.contact-card > span { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:1.8px; }
.contact-card h2 { color:var(--white); font-size:20px; }
.contact-card a { display:block; margin-top:13px; color:var(--gold-light); text-decoration:none; overflow-wrap:anywhere; }

.process-list { display:grid; gap:12px; }
.process-list article { display:flex; gap:16px; padding:20px; border-radius:18px; border:1px solid rgba(215,173,85,.20); background:#101010; }
.process-list article > span { width:43px; height:43px; flex:0 0 43px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--gold); color:var(--gold-light); font-weight:900; }
.process-list h2 { margin:0 0 7px; color:var(--white); font-size:18px; }
.process-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

.legal-content { display:grid; gap:15px; }
.legal-card { position:relative; overflow:hidden; padding:21px; border-radius:20px; border:1px solid rgba(215,173,85,.36); background:linear-gradient(145deg,rgba(215,173,85,.035),rgba(255,255,255,.012)),#0d0d0d; box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025); }
.legal-card::before { content:""; position:absolute; top:0; left:20px; width:54px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.legal-card h2 { margin:0 0 13px; color:var(--white); font-size:19px; line-height:1.3; }
.legal-card p { margin:0 0 12px; color:#c6c6c6; font-size:14px; line-height:1.65; }
.legal-card p:last-child { margin-bottom:0; }
.legal-card strong { color:var(--white); }
.legal-card a { color:var(--gold-light); text-decoration:none; overflow-wrap:anywhere; }
.legal-card ul { margin:12px 0 0; padding-left:20px; }
.legal-card li { margin-bottom:11px; color:#c5c5c5; font-size:14px; line-height:1.55; }
.legal-card li::marker { color:var(--gold); }
.legal-notice { position:relative; overflow:hidden; padding:20px; border-radius:20px; border:1px solid rgba(215,173,85,.62); background:radial-gradient(circle at 100% 100%,rgba(215,173,85,.17),transparent 45%),rgba(215,173,85,.055); box-shadow:var(--shadow); }
.legal-notice strong { display:block; margin-bottom:8px; color:var(--gold-light); font-size:12px; font-weight:900; letter-spacing:1.8px; }
.legal-notice p { margin:0; color:#d1d1d1; font-size:13px; line-height:1.65; }

/* ADMIN */
.admin-page-hero { border-bottom-color:rgba(215,173,85,.16); }
.admin-section { display:grid; gap:18px; }
.admin-login-card { max-width:620px; margin:0 auto; }
.admin-login-card label { display:block; margin:0 0 16px; color:#cfcfcf; font-size:13px; font-weight:700; }
.admin-security-notice { margin:0 0 20px; padding:14px 16px; border:1px solid rgba(215,173,85,.28); border-radius:14px; background:rgba(215,173,85,.055); color:#bdbdbd; font-size:12px; line-height:1.55; }
.admin-dashboard { display:grid; gap:18px; }
.admin-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--gold-border); border-radius:var(--radius); background:#0d0d0d; box-shadow:var(--shadow); }
.admin-toolbar-heading { min-width:0; }
.admin-toolbar-heading h2 { margin:0 0 6px; color:var(--white); font-size:22px; }
.admin-toolbar-heading p { margin:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.admin-booking-count { display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; margin-top:12px; padding:0 12px; border:1px solid var(--gold-border); border-radius:20px; background:rgba(215,173,85,.08); color:var(--gold-light); font-weight:900; }
.admin-toolbar-actions { display:grid; gap:9px; min-width:150px; }
.admin-toolbar-actions .primary-button,.admin-toolbar-actions .secondary-button,.admin-logout-button { min-height:46px; padding:11px 14px; font-size:11px; }
.admin-logout-button { appearance:none; width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:#111; color:#d8d8d8; font-weight:900; letter-spacing:1px; }
.admin-filter-card { padding:18px; border:1px solid var(--border); border-radius:18px; background:#0d0d0d; }
.admin-filter-card label { display:block; color:#cfcfcf; font-size:12px; font-weight:800; }
.admin-bookings-list { display:grid; gap:16px; }
.admin-booking-card { padding:20px; }
.admin-booking-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.admin-booking-header h2 { margin:7px 0 5px; overflow-wrap:anywhere; }
.admin-booking-header p { margin:0; color:var(--muted); font-size:12px; }
.admin-booking-price { flex:0 0 auto; color:var(--gold-light) !important; font-size:20px; white-space:nowrap; }
.admin-booking-card .summary-card { margin:18px 0; }
.admin-customer-message { margin:16px 0; padding:16px; border:1px solid rgba(215,173,85,.22); border-radius:14px; background:rgba(215,173,85,.045); }
.admin-customer-message span { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:1.5px; }
.admin-customer-message p { margin:8px 0 0; color:#d0d0d0; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-contact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-contact-actions a { display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; }
.admin-empty-state { min-height:220px; }
.admin-menu-entry { border-color:rgba(215,173,85,.42) !important; background:radial-gradient(circle at 100% 50%,rgba(215,173,85,.12),transparent 45%),linear-gradient(145deg,#121212,#0c0c0c) !important; }

/* LIGHTBOX */
.vehicle-lightbox { position:fixed; inset:0; z-index:5000; display:none; flex-direction:column; background:radial-gradient(circle at center,#161616,#000 70%); }
.vehicle-lightbox.open { display:flex; }
.lightbox-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:calc(12px + env(safe-area-inset-top)) 20px 10px; color:var(--gold-light); font-weight:900; }
.lightbox-header button { width:48px; height:48px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:50%; border:1px solid var(--gold-border); background:rgba(215,173,85,.08); color:var(--white); font-size:29px; }
.lightbox-image-viewport { position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.lightbox-image-viewport img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .22s ease; }
.lightbox-image-viewport.zoomed img { transform:scale(2); }
.lightbox-arrow { position:absolute; top:50%; z-index:5002; width:46px; height:58px; transform:translateY(-50%); border:1px solid rgba(215,173,85,.35); background:rgba(0,0,0,.55); color:var(--gold-light); font-size:37px; }
.lightbox-arrow-left { left:8px; }
.lightbox-arrow-right { right:8px; }
.lightbox-footer { padding:16px 20px calc(16px + env(safe-area-inset-bottom)); text-align:center; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.5px; }

.whatsapp-float { position:fixed; right:18px; bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 26px); z-index:1200; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#25D366; border:2px solid #fff; color:#fff; text-decoration:none; box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 3px rgba(37,211,102,.10); transition:transform .16s ease,box-shadow .16s ease; }
.whatsapp-float:active { transform:scale(.94); }
.whatsapp-float svg { width:31px; height:31px; display:block; fill:#fff !important; color:#fff !important; }
.whatsapp-float svg path { fill:#fff !important; }

.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:1100; height:calc(var(--nav-height) + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:8px 9px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(10,10,10,.98),rgba(5,5,5,.995)); border-top:1px solid rgba(215,173,85,.16); box-shadow:0 -12px 35px rgba(0,0,0,.40); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.bottom-nav-item { position:relative; appearance:none; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px 3px; border:1px solid transparent; border-radius:16px; background:transparent; color:#777; transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.bottom-nav-item > span { min-height:27px; display:flex; align-items:center; justify-content:center; font-size:23px; line-height:1; }
.bottom-nav-item small { max-width:100%; font-size:10px; line-height:1; font-weight:700; white-space:nowrap; }
.bottom-nav-item.active { border-color:rgba(215,173,85,.30); background:linear-gradient(145deg,rgba(215,173,85,.18),rgba(215,173,85,.05)); color:var(--gold-light); box-shadow:inset 0 0 18px rgba(215,173,85,.035); }
.bottom-nav-item.booking-nav { overflow:visible; padding-top:41px; color:#aaa; }
.bottom-nav-item.booking-nav > span { position:absolute; top:-28px; left:50%; width:66px; height:66px; transform:translateX(-50%); border-radius:50%; border:2px solid var(--gold-light); background:linear-gradient(145deg,#f0d382,#d2a244 55%,#aa7929); color:#090909; font-size:39px; font-weight:300; box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 24px rgba(215,173,85,.18),inset 0 1px 0 rgba(255,255,255,.55); }
.bottom-nav-item.booking-nav.active { border-color:transparent; background:transparent; color:var(--gold-light); }
.bottom-nav-item.booking-nav.active > span { box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 28px rgba(215,173,85,.30),inset 0 1px 0 rgba(255,255,255,.60); }

@media (max-width:390px) {
    :root { --header-height:88px; --nav-height:86px; }
    .app-header { grid-template-columns:48px minmax(0,1fr) 48px; padding-left:15px; padding-right:15px; }
    .header-icon-button { width:46px; height:46px; }
    .brand-button { font-size:22px; letter-spacing:5px; }
    .home-hero { min-height:770px; }
    .home-hero-background,.home-hero-overlay { height:590px; }
    .home-hero-background { background-position:58% center; }
    .home-hero-content { min-height:770px; padding:23px 22px 22px; }
    .hero-top .eyebrow { margin-bottom:10px; font-size:10px; letter-spacing:1.6px; }
    .hero-top h1 { margin-bottom:9px; font-size:44px; line-height:.94; letter-spacing:-2px; }
    .hero-subtitle { max-width:330px; font-size:12px; line-height:1.4; letter-spacing:1.35px; }
    .hero-bottom { margin-top:355px; }
    .hero-price { margin-bottom:13px; }
    .hero-price strong { font-size:43px; }
    .hero-price span { font-size:10px; }
    .hero-bottom .primary-button,.hero-bottom .secondary-button { min-height:52px; padding:13px 16px; font-size:12px; }
    .hero-bottom .secondary-button { margin-top:8px; }
    .content-section { padding-left:18px; padding-right:18px; }
    .page-hero { padding:44px 23px 30px; }
    .page-hero p:not(.eyebrow) { font-size:16px; }
    .bottom-nav-item small { font-size:9px; }
    .bottom-nav-item.booking-nav > span { width:61px; height:61px; top:-25px; }
    .whatsapp-float { right:15px; width:55px; height:55px; }
    .whatsapp-float svg { width:29px; height:29px; }
    .booking-step { padding:20px 17px; }
    .admin-toolbar { flex-direction:column; }
    .admin-toolbar-actions { width:100%; }
    .admin-contact-actions { grid-template-columns:1fr; }
    .admin-booking-header { flex-direction:column; }
}

@media (max-height:760px) and (max-width:600px) {
    .home-hero { min-height:735px; }
    .home-hero-background,.home-hero-overlay { height:555px; }
    .home-hero-content { min-height:735px; padding-top:18px; }
    .hero-top .eyebrow { margin-bottom:8px; }
    .hero-top h1 { margin-bottom:8px; font-size:40px; }
    .hero-subtitle { font-size:11px; }
    .hero-bottom { margin-top:325px; }
    .hero-price strong { font-size:39px; }
    .hero-bottom .primary-button,.hero-bottom .secondary-button { min-height:48px; padding:11px 15px; }
}

@media (min-width:760px) {
    .content-section,.page-hero { max-width:900px; margin-left:auto; margin-right:auto; }
    .home-hero { min-height:900px; }
    .home-hero-background,.home-hero-overlay { height:720px; }
    .home-hero-background { background-position:center center; }
    .home-hero-content { max-width:900px; min-height:900px; margin:0 auto; padding:40px 40px; }
}

/* FORM ERROR */
.input-error {
    border-color:#d7ad55 !important;
    box-shadow:0 0 0 3px rgba(215,173,85,.18),0 0 22px rgba(215,173,85,.22) !important;
    animation:lugivoFieldError .35s ease;
}
input.input-error,select.input-error,textarea.input-error { outline:none !important; }
input[type="checkbox"].input-error { outline:2px solid #d7ad55 !important; outline-offset:4px; }
@keyframes lugivoFieldError {
    0% { transform:translateX(0); }
    25% { transform:translateX(-5px); }
    50% { transform:translateX(5px); }
    75% { transform:translateX(-3px); }
    100% { transform:translateX(0); }
}
/* =========================================================
   LUGIVO MIETVERTRAG + DIGITALE UNTERSCHRIFT
========================================================= */

.contract-page-hero { border-bottom-color:rgba(215,173,85,.18); }
.contract-message {
    margin:0 0 18px; padding:16px 18px; border:1px solid rgba(215,173,85,.28);
    border-radius:15px; background:#0d0d0d; color:#cfcfcf; line-height:1.55;
}
.contract-error { border-color:rgba(255,100,100,.35); color:#ff9292; }
.contract-container { display:grid; gap:16px; max-width:860px; margin:0 auto; }
.contract-header-card,.contract-number-card,.contract-section-card,.contract-notice {
    position:relative; overflow:hidden; border:1px solid rgba(215,173,85,.34);
    border-radius:20px; background:linear-gradient(145deg,rgba(215,173,85,.035),rgba(255,255,255,.012)),#0d0d0d;
    box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
}
.contract-header-card {
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px;
}
.contract-brand { color:var(--gold-light); font-size:25px; line-height:1; font-weight:950; letter-spacing:5px; }
.contract-brand-subtitle { margin-top:8px; color:#777; font-size:9px; font-weight:900; letter-spacing:1.8px; }
.contract-status-area { text-align:right; }
.contract-status-label { display:block; margin-bottom:7px; color:#777; font-size:10px; font-weight:800; letter-spacing:1px; }
.contract-status { color:var(--gold-light); font-size:14px; overflow-wrap:anywhere; }
.contract-number-card { padding:19px 21px; }
.contract-number-card > span { display:block; color:#777; font-size:10px; font-weight:800; letter-spacing:1.3px; }
.contract-number-card > strong { display:block; margin:7px 0; color:#fff; font-size:18px; overflow-wrap:anywhere; }
.contract-number-card > small { color:#8d8d8d; font-size:11px; }
.contract-section-card { padding:0 0 4px; }
.contract-section-card > h2 {
    margin:0; padding:18px 20px 15px; border-bottom:1px solid var(--border);
    color:#fff; font-size:17px; line-height:1.3;
}
.contract-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.065);
}
.contract-row:last-child { border-bottom:0; }
.contract-row > span { color:#8f8f8f; font-size:12px; line-height:1.5; }
.contract-row > strong { max-width:62%; color:#eee; font-size:12px; line-height:1.5; text-align:right; overflow-wrap:anywhere; }
.contract-notice { padding:18px 20px; border-color:rgba(215,173,85,.55); background:rgba(215,173,85,.055); }
.contract-notice > strong { display:block; margin-bottom:7px; color:var(--gold-light); font-size:11px; letter-spacing:1.3px; }
.contract-notice > p { margin:0; color:#c5c5c5; font-size:12px; line-height:1.65; }

/* SIGNING CARD */
.contract-signing-card {
    position:relative; overflow:hidden; border-color:rgba(215,173,85,.48);
    background:radial-gradient(circle at 100% 0,rgba(215,173,85,.10),transparent 38%),#101010;
    box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025);
}
.contract-signing-card::before {
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); pointer-events:none;
}
.contract-signing-intro { margin:0; padding:18px 18px 8px; color:#bdbdbd; font-size:13px; line-height:1.7; }
.contract-signing-checkbox {
    margin:12px 18px 20px!important; padding:16px!important; border:1px solid rgba(215,173,85,.26);
    border-radius:15px; background:linear-gradient(145deg,rgba(215,173,85,.07),rgba(255,255,255,.012));
}
.contract-signing-checkbox input { width:22px; height:22px; flex:0 0 22px; margin:1px 0 0; accent-color:var(--gold); }
.contract-signing-checkbox span { color:#d0d0d0; font-size:12px; font-weight:500; line-height:1.65; }
.contract-signature-name-label { display:block; margin:0; padding:0 18px 18px; color:#cfcfcf; font-size:12px; font-weight:700; }
.contract-signature-name-label input {
    width:100%; margin-top:9px; min-height:54px; padding:14px 15px; border:1px solid rgba(215,173,85,.24);
    border-radius:14px; background:#090909; color:#fff; font-size:15px;
}
.contract-signature-name-label input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,173,85,.08); outline:none; }
.contract-signature-name-label input::placeholder { color:#5f5f5f; }
.contract-signature-wrapper { padding:0 18px 20px; }
.contract-signature-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:10px; }
.contract-signature-heading>span { color:#fff; font-size:13px; font-weight:800; }
.contract-signature-heading>small { color:#777; font-size:10px; font-weight:600; text-align:right; }
.contract-signature-canvas-wrapper {
    position:relative; width:100%; height:220px; overflow:hidden; border:1px solid rgba(215,173,85,.48);
    border-radius:16px; background:linear-gradient(180deg,#fafafa,#eee);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.10),0 10px 28px rgba(0,0,0,.22);
    touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none;
}
.contract-signature-canvas-wrapper::after {
    content:""; position:absolute; left:8%; right:8%; bottom:46px; height:1px; background:rgba(0,0,0,.20); pointer-events:none;
}
.contract-signature-canvas {
    position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0;
    border-radius:16px; background:transparent; cursor:crosshair; touch-action:none; overscroll-behavior:contain;
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; z-index:2;
}
.contract-signature-placeholder {
    position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); padding:0 20px;
    color:rgba(0,0,0,.28); font-size:12px; font-weight:900; letter-spacing:2px; text-align:center;
    pointer-events:none; z-index:1; transition:opacity .18s ease,visibility .18s ease;
}
.contract-signature-placeholder.hidden { opacity:0; visibility:hidden; }
.contract-signature-clear-button { min-height:48px; margin-top:10px; padding:11px 15px; border-radius:13px; font-size:11px; letter-spacing:1px; }
.contract-signature-notice {
    margin:0 18px 18px; padding:16px; border:1px solid rgba(215,173,85,.35); border-radius:15px;
    background:linear-gradient(145deg,rgba(215,173,85,.085),rgba(215,173,85,.025));
}
.contract-signature-notice strong { display:block; margin-bottom:8px; color:var(--gold-light); font-size:11px; font-weight:900; letter-spacing:1.4px; }
.contract-signature-notice p { margin:0; color:#bdbdbd; font-size:11px; line-height:1.65; }
#contractSignMessage { margin:0 18px 12px; min-height:18px; font-size:12px; line-height:1.55; }
#contractSignMessage.error { color:#ff9292; }
#contractSignMessage.success { color:#9ed9a7; }
.contract-sign-button {
    width:calc(100% - 36px); margin:0 18px 20px; min-height:62px; padding:15px 18px;
    font-size:12px; line-height:1.4; letter-spacing:1px; white-space:normal;
}
.contract-sign-button:disabled { opacity:.52; cursor:default; transform:none; }
.contract-sign-button.is-loading { position:relative; color:transparent!important; pointer-events:none; }
.contract-sign-button.is-loading::after {
    content:""; position:absolute; top:50%; left:50%; width:22px; height:22px; margin:-11px 0 0 -11px;
    border:3px solid rgba(0,0,0,.24); border-top-color:#080808; border-radius:50%;
    animation:lugivoContractSigningSpinner .8s linear infinite;
}
@keyframes lugivoContractSigningSpinner { to { transform:rotate(360deg); } }
.contract-signed-confirmation {
    position:relative; padding-bottom:6px; border-color:rgba(105,190,124,.42);
    background:radial-gradient(circle at 50% 0,rgba(105,190,124,.12),transparent 40%),#101010;
}
.contract-signed-icon {
    width:66px; height:66px; display:flex; align-items:center; justify-content:center; margin:24px auto 10px;
    border:1px solid rgba(105,190,124,.65); border-radius:50%; background:rgba(105,190,124,.10);
    color:#9ed9a7; font-size:29px; font-weight:900; box-shadow:0 0 28px rgba(105,190,124,.10);
}
.contract-signed-confirmation>h2 { border-bottom:0; padding:8px 18px 6px; color:#9ed9a7; font-size:15px; text-align:center; }
.contract-signed-confirmation>p { max-width:420px; margin:0 auto 18px; padding:0 18px; color:#bdbdbd; font-size:12px; line-height:1.6; text-align:center; }
.contract-signing-card.contract-already-signed { display:none; }
.contract-status[data-status="signed"],.contract-status[data-status="unterzeichnet"] { color:#9ed9a7; }
.contract-status[data-status="accepted"],.contract-status[data-status="angenommen"] { color:#b9dc9f; }
.contract-signature-canvas-wrapper.input-error {
    border-color:var(--gold)!important; box-shadow:0 0 0 3px rgba(215,173,85,.15),0 0 24px rgba(215,173,85,.17)!important;
    animation:lugivoFieldError .35s ease;
}
.contract-signing-checkbox.input-error { border-color:var(--gold)!important; box-shadow:0 0 0 3px rgba(215,173,85,.10); }
body.contract-signature-drawing { overscroll-behavior:none; }
body.contract-signature-drawing .contract-signature-canvas { touch-action:none; }
#page-contract { padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 70px); }
#page-contract .content-section { padding-bottom:40px; }

/* ADMIN DOCUMENT VIEWER */
.admin-document-viewer {
    position:fixed; inset:0; z-index:6000; display:flex; flex-direction:column; background:rgba(0,0,0,.97); color:#fff;
}
.admin-document-viewer-header {
    min-height:72px; display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:10px;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom:1px solid rgba(215,173,85,.18); background:#090909;
}
.admin-document-viewer-close {
    width:46px; height:46px; border:1px solid var(--gold-border); border-radius:50%; background:#111; color:#fff; font-size:27px;
}
.admin-document-viewer-title-wrap { min-width:0; text-align:center; }
.admin-document-viewer-title { display:block; color:var(--gold-light); font-size:11px; letter-spacing:1.4px; overflow-wrap:anywhere; }
.admin-document-viewer-counter { display:block; margin-top:4px; color:#777; font-size:10px; }
.admin-document-viewer-stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.admin-document-viewer-zoom { width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform-origin:center; }
.admin-document-viewer-image { max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; }
.admin-document-viewer-pdf { width:100%; padding:24px; }
.admin-document-viewer-pdf-card { max-width:430px; margin:auto; padding:24px; border:1px solid var(--gold-border); border-radius:20px; background:#111; text-align:center; }
.admin-document-viewer-pdf-card strong { color:var(--gold-light); }
.admin-document-viewer-pdf-card p { color:#aaa; }
.admin-document-viewer-controls {
    display:grid; grid-template-columns:64px minmax(0,1fr) 64px; gap:10px; padding:10px 14px;
    border-top:1px solid rgba(255,255,255,.07); background:#090909;
}
.admin-document-viewer-navigation,.admin-document-viewer-reset {
    min-height:48px; border:1px solid var(--gold-border); border-radius:14px; background:#111; color:var(--gold-light); font-weight:900;
}
.admin-document-viewer-navigation { font-size:30px; }
.admin-document-viewer-reset { font-size:10px; letter-spacing:1px; }
.admin-document-viewer-footer {
    display:flex; justify-content:center; gap:8px; padding:4px 12px calc(10px + env(safe-area-inset-bottom));
    background:#090909; color:#666; font-size:8px; font-weight:800; letter-spacing:.8px; text-align:center;
}

/* WhatsApp above bottom navigation */
.whatsapp-float { bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 42px); }

@media (max-width:600px) {
    .contract-header-card { padding:18px; }
    .contract-brand { font-size:21px; letter-spacing:4px; }
    .contract-row { padding:13px 17px; gap:14px; }
    .contract-row>strong { max-width:60%; }
    .contract-signing-intro { padding:16px 16px 7px; font-size:12px; }
    .contract-signing-checkbox { margin:10px 16px 18px!important; padding:14px!important; }
    .contract-signing-checkbox span { font-size:11px; line-height:1.6; }
    .contract-signature-name-label { padding:0 16px 17px; }
    .contract-signature-wrapper { padding:0 16px 18px; }
    .contract-signature-canvas-wrapper { height:210px; }
    .contract-signature-heading { align-items:flex-start; flex-direction:column; gap:3px; }
    .contract-signature-heading>small { text-align:left; }
    .contract-signature-notice { margin:0 16px 17px; padding:14px; }
    #contractSignMessage { margin:0 16px 11px; }
    .contract-sign-button { width:calc(100% - 32px); margin:0 16px 18px; min-height:60px; padding:14px 13px; font-size:11px; }
    .contract-signed-icon { width:60px; height:60px; font-size:27px; }
    .whatsapp-float { bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 48px); }
}
@media (max-width:390px) {
    .contract-header-card { flex-direction:column; }
    .contract-status-area { text-align:left; }
    .contract-signature-canvas-wrapper { height:195px; }
    .contract-signature-placeholder { padding:0 14px; font-size:10px; letter-spacing:1.5px; }
    .contract-signature-name-label input { min-height:51px; font-size:14px; }
    .contract-signature-clear-button { min-height:46px; font-size:10px; }
    .contract-sign-button { min-height:58px; font-size:10px; }
}
@media (max-width:350px) {
    .contract-signature-canvas-wrapper { height:180px; }
    .contract-signing-checkbox { padding:12px!important; }
    .contract-signature-notice { padding:12px; }
    .contract-sign-button { letter-spacing:.7px; }
}
@media (min-width:760px) {
    .contract-signature-canvas-wrapper { height:260px; }
    .contract-signing-card,.contract-signed-confirmation { max-width:100%; }
    .contract-signature-name-label input { max-width:520px; }
}
@media (prefers-reduced-motion:reduce) {
    .contract-sign-button,.contract-signature-placeholder,.contract-signature-clear-button { transition:none; }
    .contract-sign-button.is-loading::after { animation-duration:1.4s; }
}

/* =========================================================
   LUGIVO LIVE DESKTOP FIX · 2026-10-05
   Header-Abstand + hochwertiges RS3-Flottenbild
   Keine Buchungs-/Payment-Logik betroffen
========================================================= */

/* Jede Unterseite beginnt sicher unter dem festen Header. */
.app-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
}

.app-page:not(#page-home) {
    scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 18px);
}

/* Safari/Desktop: etwas mehr Luft zwischen Header und Seitenüberschrift. */
@media (min-width: 760px) {
    :root {
        --header-height: 104px;
    }

    .app-header {
        height: calc(var(--header-height) + env(safe-area-inset-top));
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: 16px;
    }

    .app-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top));
    }

    .app-page:not(#page-home) > .page-hero {
        padding-top: 52px;
    }
}

/*
   Das bisherige freigestellte rs3-front-Bild wird auf der FLOTTEN-Seite
   durch das bereits vorhandene hochwertige München-RS3-Motiv ersetzt.
   Fahrzeugdetail/Galerie bleiben unverändert.
*/
#page-fleet img[src*="rs3-front" i],
#page-fleet img[src*="Audi-RS3-Lugivo" i],
#page-fleet img[src*="Audi RS3 Frontansicht" i] {
    content: url("images/LUGIVO-Hero-Munich-RS3.png");
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 62%;
    background: #090909;
}

/* Flottenbild auf großen Displays nicht unnötig hoch ziehen. */
@media (min-width: 760px) {
    #page-fleet img[src*="rs3-front" i],
    #page-fleet img[src*="Audi-RS3-Lugivo" i],
    #page-fleet img[src*="Audi RS3 Frontansicht" i] {
        max-height: 470px;
    }
}

/* Smartphone/WebView behält die kompaktere Headerhöhe. */
@media (max-width: 390px) {
    :root {
        --header-height: 88px;
    }

    .app-page:not(#page-home) > .page-hero {
        padding-top: 44px;
    }
}

/* =========================================================
   LUGIVO HOMEPAGE / CLOUDFLARE PRODUCTION · 2026-10-05
   Nur Darstellung. Buchungs-, Vertrags- und Payment-Logik bleibt unberührt.
========================================================= */
.hero{
    position:relative;
    min-height:min(760px,calc(100dvh - var(--header-height) - var(--nav-height)));
    display:flex;
    align-items:stretch;
    overflow:hidden;
    background:
      linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.88) 100%),
      url('images/LUGIVO-Hero-Munich-RS3.png') center center/cover no-repeat;
    border-bottom:1px solid rgba(215,173,85,.18);
}
.hero-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 62% 40%,transparent 0,rgba(0,0,0,.08) 38%,rgba(0,0,0,.72) 100%)}
.hero-content{position:relative;z-index:1;width:min(1180px,100%);min-height:inherit;margin:0 auto;padding:clamp(32px,6vw,74px) clamp(20px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:80px}
.hero-top h1{margin:0 0 10px;color:#fff;font-size:clamp(48px,8vw,88px);line-height:.9;font-weight:950;letter-spacing:-3px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.hero-subtitle{margin:0;color:#f1f1f1;font-size:clamp(13px,2vw,18px);font-weight:800;letter-spacing:1px;text-shadow:0 3px 14px #000}
.hero-bottom{max-width:520px;padding:20px;border:1px solid rgba(215,173,85,.20);border-radius:20px;background:linear-gradient(145deg,rgba(8,8,8,.84),rgba(8,8,8,.60));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 60px rgba(0,0,0,.30)}
.hero-price{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}.hero-price strong{font-size:clamp(38px,7vw,62px);line-height:1;color:#fff}.hero-price small,.hero-price span{color:var(--gold-light);font-weight:900;letter-spacing:1px}.hero-bottom>p{margin:0 0 15px;color:#ddd}.hero-bottom .primary-button,.hero-bottom .secondary-button{margin-top:8px}
.feature-grid,.pricing-grid,.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card,.pricing-card,.process-card,.cta-card{border:1px solid rgba(215,173,85,.18);border-radius:18px;background:linear-gradient(145deg,#121212,#090909);padding:22px}.feature-card strong{display:block;color:var(--gold-light);font-size:25px;margin-bottom:6px}.feature-card span,.pricing-card p,.process-card p,.cta-card p{color:#aaa;line-height:1.6}.pricing-card strong{display:block;font-size:34px;margin:12px 0;color:#fff}.pricing-card>span{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:1.3px}.pricing-card.featured{border-color:rgba(215,173,85,.55);box-shadow:0 18px 50px rgba(0,0,0,.28)}.pricing-card .primary-button{width:100%;margin-top:10px}.process-card b{color:var(--gold);font-size:12px;letter-spacing:1px}.process-card h3{margin:12px 0 6px}.section-note{color:#888;font-size:12px;line-height:1.6;margin-top:16px}.cta-card{text-align:center;padding:clamp(28px,6vw,60px)}.cta-card h2{font-size:clamp(30px,6vw,54px);margin:8px 0 12px}.fleet-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.fleet-card.unavailable{opacity:.65}.menu-list{display:grid;gap:10px}.menu-list button{min-height:58px;text-align:left;padding:0 18px;border:1px solid rgba(215,173,85,.18);border-radius:14px;background:#101010;color:#fff;font-weight:800}.legal-card{padding:22px;border:1px solid rgba(215,173,85,.18);border-radius:18px;background:#101010;line-height:1.7}.button-row{display:flex;gap:10px;margin-top:18px}.button-row>*{flex:1}.checkbox-label{display:flex!important;align-items:flex-start;gap:10px}.checkbox-label input{width:auto!important;margin-top:3px}.quote-card,.summary-card,.contract-details{display:grid;gap:1px;margin:18px 0;background:rgba(215,173,85,.12);border:1px solid rgba(215,173,85,.18);border-radius:14px;overflow:hidden}.quote-card>div,.summary-card>div,.contract-details>div{display:flex;justify-content:space-between;gap:18px;padding:13px 15px;background:#0d0d0d}.quote-card span,.summary-card span,.contract-details span{color:#999}.contract-details{grid-template-columns:repeat(2,minmax(0,1fr))}.status-form{display:grid;gap:14px}.full-width{width:100%}

@media (min-width:760px){
    :root{--header-height:104px}
    .app-header{height:calc(var(--header-height) + env(safe-area-inset-top));padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:16px}
    .app-content{padding-top:calc(var(--header-height) + env(safe-area-inset-top))}
    .app-page:not(#page-home)>.page-hero,.app-page:not(#page-home)>.vehicle-hero{padding-top:64px}
    .hero{min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
@media(max-width:800px){.feature-grid,.pricing-grid,.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contract-details{grid-template-columns:1fr}.hero-content{gap:60px}}
@media(max-width:480px){.feature-grid,.pricing-grid,.process-grid{grid-template-columns:1fr}.hero{min-height:650px;background-position:58% center}.hero-content{padding:28px 18px 26px;gap:48px}.hero-bottom{padding:16px}.hero-bottom .primary-button,.hero-bottom .secondary-button{width:100%}.button-row{flex-direction:column}}