:root { --surface:#050607; --surface-2:#090a0c; --surface-3:#121418; --white:#fafaf7; --soft-white:#f7f7f2; --muted:#7c818d; --muted-light:#b8bdc7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--surface); color:#fff; font-family:"Inter",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.home-header { height:96px; padding:22px 5.555vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--surface-3); background:var(--surface); position:relative; z-index:20; }
.home-logo { width:140px; height:53px; display:block; }
.home-logo img { width:100%; height:100%; object-fit:contain; }
.home-nav { display:flex; gap:34px; align-items:center; }
.home-nav a { color:var(--muted); font-size:14px; font-weight:500; transition:color .2s ease; }
.home-nav a:hover,.home-nav a.is-active { color:#fff; font-weight:700; }
.header-actions { display:flex; gap:16px; align-items:center; }
.language-pills { display:flex; align-items:center; gap:4px; padding:4px; border-radius:22px; background:#0e1012; }
.language-pills span { padding:8px 12px; color:var(--muted); font-size:12px; font-weight:700; border-radius:18px; }
.language-pills .is-active { color:#050607; background:#f5f5f0; }
.pill { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border-radius:24px; font-size:14px; font-weight:700; white-space:nowrap; transition:transform .2s ease,filter .2s ease; }
.pill:hover { transform:translateY(-2px); filter:brightness(.92); }
.pill-light { color:#050607; background:var(--soft-white); }
.pill-dark { color:var(--white); background:rgba(14,16,18,.85); border:1px solid #474d57; }
.menu-toggle,.mobile-nav { display:none; }

.figma-hero { height:760px; position:relative; overflow:hidden; background:#040506; }
.hero-car { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-gradient { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,3,4,.96) 0%,rgba(3,3,4,.38) 48%,rgba(3,3,4,.08) 100%); }
.hero-content { position:absolute; left:5.555vw; top:152px; width:min(820px,62vw); display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.eyebrow,.section-label { margin:0; color:#c4ccd9; font-size:14px; font-weight:700; }
.hero-content h1 { margin:0; color:var(--white); font-size:clamp(48px,3.89vw,56px); line-height:.92; letter-spacing:-.03em; font-weight:900; }
.hero-copy { width:min(560px,100%); margin:0; color:var(--muted-light); font-size:18px; line-height:28px; }
.hero-actions { display:flex; gap:12px; }
.hero-highlights { position:absolute; left:5.555vw; bottom:40px; width:88.89vw; display:flex; gap:40px; align-items:center; }
.hero-highlights span { display:flex; align-items:center; gap:10px; color:#c2c9d6; font-size:12px; font-weight:700; }
.hero-highlights i { width:7px; height:7px; border-radius:50%; background:#238cff; box-shadow:0 0 14px rgba(35,140,255,.8); }

.vehicle-collection { padding:110px 5.555vw 120px; background:var(--surface); }
.collection-heading { margin-bottom:44px; display:flex; align-items:flex-end; justify-content:space-between; }
.section-label { color:var(--muted); font-size:13px; }
.collection-heading h2 { margin:14px 0 0; color:#fff; font-size:clamp(44px,4.03vw,58px); line-height:1; letter-spacing:-.02em; font-weight:900; }
.brand-filters { display:flex; gap:8px; }
.brand-filters button { padding:10px 16px; border:0; border-radius:20px; color:var(--muted); background:#0e1012; font-size:12px; font-weight:700; cursor:pointer; }
.brand-filters button.is-active { color:#050607; background:var(--soft-white); }
.vehicle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.figma-car-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid var(--surface-3); border-radius:24px; background:var(--surface-2); transition:transform .25s ease,border-color .25s ease; }
.figma-car-card:hover { transform:translateY(-4px); border-color:#2c323b; }
.figma-car-card[hidden] { display:none; }
.figma-car-card>img { width:100%; height:250px; object-fit:cover; display:block; }
.figma-car-card.featured { grid-column:1/-1; }
.figma-car-card.featured>img { height:400px; }
.card-info { height:96px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; }
.card-info>span { display:flex; flex-direction:column; gap:5px; }
.card-info small { color:var(--muted); font-size:11px; font-weight:700; }
.card-info strong { color:#fff; font-size:22px; font-weight:700; }
.card-info b { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--soft-white); color:#050607; font-size:20px; }

.consultation { height:520px; padding:70px 5.555vw; background:var(--surface); }
.consultation-panel { height:380px; padding:62px 5.555vw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center; border:1px solid #1f2633; border-radius:28px; background:linear-gradient(90deg,#0e121a,#050607); }
.consultation-panel .section-label { color:#abb8cf; }
.consultation-panel h2 { margin:0; color:var(--white); font-size:clamp(40px,3.75vw,54px); line-height:1; letter-spacing:-.02em; font-weight:900; }
.consultation-panel>p:not(.section-label) { margin:0; color:#b8bfcc; font-size:17px; }

.figma-footer { padding:70px 5.555vw 34px; border-top:1px solid #12141a; background:#030405; }
.footer-main { min-height:190px; display:flex; align-items:flex-start; justify-content:space-between; }
.footer-brand { width:360px; display:flex; flex-direction:column; gap:14px; }
.footer-brand img { width:185px; height:70px; object-fit:contain; }
.footer-brand p { width:330px; margin:0; color:#8c94a3; font-size:14px; line-height:22px; }
.footer-brand strong { color:#b8bfd1; font-size:12px; }
.footer-links { display:flex; gap:76px; }
.footer-links>div { display:flex; flex-direction:column; gap:13px; }
.footer-links strong { margin-bottom:1px; color:var(--white); font-size:12px; }
.footer-links a,.footer-links span { color:#8c94a3; font-size:14px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { min-height:81px; padding-top:32px; margin-top:48px; border-top:1px solid #12141a; display:flex; align-items:flex-start; justify-content:space-between; color:#666e7a; font-size:12px; }
.footer-bottom strong { color:#b8bfd1; }

@media (max-width:980px) {
  .home-nav,.header-actions { display:none; }
  .menu-toggle { width:44px; height:44px; display:grid; place-content:center; gap:6px; border:1px solid #2b3038; border-radius:50%; background:#0e1012; }
  .menu-toggle span { width:18px; height:1px; background:#fff; }
  .mobile-nav { position:absolute; top:96px; left:0; right:0; padding:24px 5.555vw; display:none; flex-direction:column; gap:20px; border-bottom:1px solid var(--surface-3); background:rgba(5,6,7,.98); }
  .mobile-nav.is-open { display:flex; }
  .hero-content { width:min(760px,88vw); }
  .vehicle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-main { gap:60px; }
  .footer-links { gap:36px; }
}

@media (max-width:680px) {
  .home-header { height:78px; padding:13px 20px; }
  .home-logo { width:122px; height:48px; }
  .mobile-nav { top:78px; padding:24px 20px; }
  .figma-hero { height:680px; }
  .hero-car { object-position:64% center; opacity:.83; }
  .hero-gradient { background:linear-gradient(90deg,rgba(3,3,4,.97) 0%,rgba(3,3,4,.62) 60%,rgba(3,3,4,.25) 100%); }
  .hero-content { left:20px; right:20px; top:124px; width:auto; gap:20px; }
  .eyebrow { font-size:11px; }
  .hero-content h1 { font-size:clamp(38px,11.5vw,50px); }
  .hero-copy { font-size:16px; line-height:24px; }
  .hero-actions { flex-wrap:wrap; }
  .hero-highlights { left:20px; bottom:28px; width:calc(100% - 40px); gap:15px 24px; flex-wrap:wrap; }
  .hero-highlights span { font-size:10px; }
  .vehicle-collection { padding:76px 20px 82px; }
  .collection-heading { align-items:flex-start; flex-direction:column; gap:28px; }
  .collection-heading h2 { font-size:42px; }
  .brand-filters { max-width:100%; flex-wrap:wrap; }
  .vehicle-grid { grid-template-columns:1fr; gap:16px; }
  .figma-car-card.featured { grid-column:auto; }
  .figma-car-card>img,.figma-car-card.featured>img { height:230px; }
  .card-info { height:86px; padding:16px 18px; }
  .consultation { height:auto; padding:40px 20px 72px; }
  .consultation-panel { height:auto; min-height:390px; padding:46px 22px; }
  .consultation-panel h2 { font-size:39px; }
  .consultation-panel>p:not(.section-label) { font-size:15px; line-height:23px; }
  .figma-footer { padding:56px 20px 28px; }
  .footer-main { flex-direction:column; gap:54px; }
  .footer-brand,.footer-brand p { width:100%; }
  .footer-links { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 24px; }
  .footer-bottom { min-height:92px; gap:18px; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }