/* VOICE PORTAL 008.3 – ONLY a softer Jeep hero + three separate offer previews.
   Existing navigation, forms, app.js, API, ownership, login, QR and search are untouched. */
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:#f9fcff; border-radius:0 0 23px 23px;
}
/* Use the actual approved Jeep source asset, never the flattened UI screenshot. */
.hero::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; right:0; left:26%;
  background:url('/voice-jeep-0083.webp?v=0083') right 53% / cover no-repeat;
}
.hero::after {
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#f9fcff 0%,#f9fcff 20%,
    rgba(249,252,255,.98) 27%,rgba(249,252,255,.89) 34%,
    rgba(249,252,255,.60) 41%,rgba(249,252,255,.26) 48%,
    rgba(249,252,255,.05) 56%,rgba(249,252,255,0) 65%);
}
.hero .hero-copy,.hero .hero-art {position:relative;z-index:2}
.hero .hero-art {min-height:480px}
.hero .hero-art > svg,.hero .hero-art > .art-halo {display:none!important}
.hero .hero-copy {text-shadow:0 1px 1px rgba(255,255,255,.12)}
.hero .hero-art > .floating {
  right:6px;bottom:22px;width:min(310px,92%);z-index:4;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.84);
  box-shadow:0 13px 40px rgba(20,33,56,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:19px;padding:18px 62px 18px 21px;gap:6px;
}
.hero .hero-art > .floating strong {line-height:1.45;color:#173250}
.voice-hero-arrow-0083 {
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;background:#08aa98;color:white;
  text-decoration:none;font-size:22px;box-shadow:0 4px 16px #08aa9833;
  transition:background .18s, transform .18s;
}
.voice-hero-arrow-0083:hover {background:#078e7d;transform:translateY(-50%) scale(1.04)}
.voice-hero-arrow-0083:focus-visible {outline:3px solid #123954;outline-offset:3px}
/* Insert a REAL, independently responsive section directly below the hero. */
#voice-featured-0083 {
  max-width:1360px;margin:0 auto 38px;padding:35px 30px 18px;
  color:#1b304d;
}
#voice-featured-0083 .vf-top {display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:21px}
#voice-featured-0083 .vf-eyebrow {display:block;color:#069e90;font-size:11px;letter-spacing:2.3px;font-weight:850}
#voice-featured-0083 h2 {font-size:clamp(26px,2.7vw,35px);line-height:1.2;letter-spacing:-1.15px;margin:6px 0 0;color:#182d4b}
#voice-featured-0083 .vf-all {color:#078f86;text-decoration:none;font-size:13px;font-weight:800;white-space:nowrap}
#voice-featured-0083 .vf-all:hover {text-decoration:underline}
#voice-featured-0083 .vf-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
#voice-featured-0083 .vf-card {position:relative;background:#fff;overflow:hidden;min-width:0;border:1px solid #e2eaf1;border-radius:16px;box-shadow:0 13px 29px rgba(30,55,88,.05);transition:box-shadow .2s, transform .2s}
#voice-featured-0083 .vf-card:hover {box-shadow:0 19px 42px rgba(20,51,87,.15);transform:translateY(-3px)}
#voice-featured-0083 .vf-open {display:block;color:inherit;text-decoration:none;height:100%}
#voice-featured-0083 .vf-photo {height:176px;position:relative;overflow:hidden;background:linear-gradient(150deg,#d9e5ef,#f5f8fb);display:grid;place-items:center;color:#6e7f94}
#voice-featured-0083 .vf-photo img {display:block;width:100%;height:100%;object-fit:cover}
#voice-featured-0083 .vf-badge {position:absolute;left:13px;top:12px;background:rgba(255,255,255,.95);color:#25475f;border:1px solid #dbe8ef;border-radius:999px;padding:6px 10px;font-weight:850;font-size:10px;letter-spacing:.06em}
#voice-featured-0083 .vf-badge.live {background:#e7f9f0;color:#187743;border-color:#c8e9d6}
#voice-featured-0083 .vf-save {position:absolute;right:13px;top:12px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#1f4158;font-size:20px;box-shadow:0 2px 10px #162b4526;cursor:pointer}
#voice-featured-0083 .vf-save[aria-pressed="true"] {color:#d84357;background:#fff0f1}
#voice-featured-0083 .vf-info {padding:16px 18px 17px}
#voice-featured-0083 .vf-name {font-size:19px;letter-spacing:-.45px;font-weight:850;color:#1e314e;margin:0 0 5px}
#voice-featured-0083 .vf-model {font-size:12px;color:#607891;margin:0;min-height:18px}
#voice-featured-0083 .vf-spec {display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0 12px;color:#60768b;font-size:12px;line-height:1.4}
#voice-featured-0083 .vf-spec span {white-space:nowrap}
#voice-featured-0083 .vf-spec span::before {content:"•";padding-right:6px;color:#079f93;font-weight:900}
#voice-featured-0083 .vf-bottom {display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid #eef1f5;padding-top:13px}
#voice-featured-0083 .vf-price {display:block;font-size:23px;font-weight:900;letter-spacing:-.65px;color:#078f85}
#voice-featured-0083 .vf-rate {font-size:11px;color:#65798e;margin-top:4px;line-height:1.35}
#voice-featured-0083 .vf-go {flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7f8f5;color:#079b8c;font-size:22px}
#voice-featured-0083 .vf-footnote {font-size:12px;color:#667f94;margin:14px 2px 0;line-height:1.6}
#voice-featured-0083 .vf-footnote strong {color:#375570}
/* Keep existing search controls and existing #oferty cards below this row. */
@media(max-width:1050px) {
  #voice-featured-0083 .vf-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .hero-art > .floating {right:8px}
}
@media(max-width:920px) {
  .hero {grid-template-columns:1fr;gap:16px;padding-bottom:25px}
  .hero::before {inset:auto 18px 25px;height:min(62vw,430px);border-radius:17px;background-position:center center;background-size:cover}
  .hero::after {background:none}
  .hero .hero-copy {z-index:4}
  .hero .hero-art {min-height:min(62vw,430px);margin:0 18px}
  .hero .hero-art > .floating {bottom:8px;right:10px}
}
@media(max-width:650px) {
  #voice-featured-0083 {padding:26px 15px 8px;margin-bottom:26px}
  #voice-featured-0083 .vf-top {align-items:start;flex-direction:column;gap:9px}
  #voice-featured-0083 .vf-grid {grid-template-columns:1fr;gap:15px}
  #voice-featured-0083 .vf-photo {height:180px}
  .hero {gap:12px;padding-bottom:16px}
  .hero::before {inset:auto 12px 16px;height:min(73vw,345px);border-radius:13px}
  .hero .hero-art {min-height:min(73vw,345px);margin:0 12px}
  .hero .hero-art > .floating {bottom:6px;right:7px;max-width:83%;width:248px;border-radius:12px;padding:9px 44px 9px 11px;gap:4px}
  .hero .hero-art > .floating span {font-size:8px;letter-spacing:1px}
  .hero .hero-art > .floating strong {font-size:11px}
  .voice-hero-arrow-0083 {right:7px;width:31px;height:31px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){#voice-featured-0083 .vf-card,.voice-hero-arrow-0083{transition:none}}
