/* DeAutos.com — Argentine marketplace
   Palette: celeste argentino (#74ACDF), sol amarillo (#FCBF49), azul profundo (#0B2A4A)
*/
:root{
  --ar-blue:#74ACDF;
  --ar-blue-2:#5A95CC;
  --ar-blue-deep:#0B2A4A;
  --ar-yellow:#FCBF49;
  --ar-yellow-2:#F4A52A;
  --white:#FFFFFF;
  --bg:#F5F8FC;
  --line:#E3EAF2;
  --text:#0F1B2D;
  --muted:#6B7A8F;
  --green:#1EA672;
  --red:#E5484D;
  --shadow: 0 4px 14px rgba(11,42,74,.08);
  --shadow-hover: 0 10px 28px rgba(11,42,74,.14);
  --radius:14px;
  --radius-sm:8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}
a{color:var(--ar-blue-deep);text-decoration:none}
a:hover{color:var(--ar-blue-2)}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}

/* ---------- Trust strip (above topbar) ---------- */
.trust-strip{
  background: linear-gradient(90deg, var(--ar-blue-deep), #143862);
  color:#E8F0F8;
  font-size:12.5px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.trust-strip-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:8px 20px;
}
.trust-strip-inner > span{display:inline-flex; align-items:center; gap:6px}
.trust-strip-inner svg{color:var(--ar-yellow); flex-shrink:0}
.trust-phone{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-weight:700;
  padding:3px 10px; border-radius:6px;
  background: rgba(37, 211, 102, .18); border:1px solid rgba(37, 211, 102, .4);
}
.trust-phone:hover{background: rgba(37, 211, 102, .3); color:#fff}
.trust-phone svg{color:#25D366}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  box-shadow: 0 1px 0 rgba(11,42,74,.04);
}
.topbar-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:10px 20px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ar-blue-deep); line-height:1}
.brand-mark{display:inline-flex; flex-shrink:0}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-name{font-weight:800; font-size:22px; color:var(--ar-blue-deep); line-height:1}
.brand-tld{color:var(--ar-blue-2); font-weight:700}
.brand-tag{font-size:11px; color:var(--muted); font-weight:500; line-height:1; letter-spacing:.2px}
.topnav{display:flex; gap:6px; margin-left:18px}
.topnav a{
  font-weight:600; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:8px;
}
.topnav a::before{
  width:16px; height:16px; flex-shrink:0;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  display:inline-block; content:"";
}
.topnav a[data-icon="buy"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11l1-5h12l1 5M5 11h14v8H5zM7 19v2M17 19v2'/><circle cx='8.5' cy='14.5' r='1.5'/><circle cx='15.5' cy='14.5' r='1.5'/></svg>")}
.topnav a[data-icon="sell"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41L13.42 20.58a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>")}
.topnav a[data-icon="finance"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>")}
.topnav a[data-icon="warranty"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l9 4v6c0 5-3.6 9.5-9 10-5.4-.5-9-5-9-10V6l9-4z'/></svg>")}
.topnav a[data-icon="help"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>")}
.topnav a[data-icon="news"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h12a2 2 0 012 2v12a2 2 0 002-2V8h-4'/><path d='M4 4v14a2 2 0 002 2h12'/><line x1='8' y1='10' x2='14' y2='10'/><line x1='8' y1='14' x2='14' y2='14'/></svg>")}
.topnav a:hover{color:var(--ar-blue-2); background:#F0F4FA}
.topbar-actions{margin-left:auto; display:flex; gap:10px; align-items:center}

/* Language switcher */
.lang-switch{position:relative}
.lang-toggle{
  background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:700; color:var(--ar-blue-deep);
  display:inline-flex; align-items:center; gap:6px;
}
.lang-toggle:hover{background:#F0F4FA}
.lang-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 10px 28px rgba(11,42,74,.14);
  list-style:none; margin:0; padding:6px; min-width:170px;
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:30;
}
.lang-switch.open .lang-menu{opacity:1; pointer-events:auto; transform: translateY(0)}
.lang-menu li{margin:0}
.lang-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px; background:transparent; border:0;
  font-size:14px; color:var(--text); border-radius:8px; text-align:left;
}
.lang-menu button:hover{background:#F0F4FA}
.lang-menu button.active{background:#E2ECF7; color:var(--ar-blue-deep); font-weight:700}
.lang-menu button span{font-size:18px}

/* ---------- Auth modal ---------- */
.auth-modal{
  position:fixed; inset:0; background:rgba(11,42,74,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:50; padding:18px;
  opacity:0; transition:opacity .15s ease;
}
.auth-modal.open{opacity:1}
.auth-modal[hidden]{display:none}
.auth-card{
  background:#fff; border-radius:16px;
  width:100%; max-width:440px; max-height:92vh; overflow:auto;
  box-shadow: 0 20px 60px rgba(11,42,74,.35);
  position:relative; padding:28px;
}
.auth-close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:0; color:var(--muted);
  font-size:24px; line-height:1; cursor:pointer;
}
.auth-close:hover{background:#F0F4FA; color:var(--ar-blue-deep)}
.auth-header{text-align:center; margin-bottom:18px}
.auth-logo{display:inline-flex; margin-bottom:8px}
.auth-header h2{margin:0 0 4px; color:var(--ar-blue-deep); font-size:20px}
.auth-header p{margin:0; color:var(--muted); font-size:14px}

.auth-tabs{
  display:grid; grid-template-columns: 1fr 1fr;
  background:#F0F4FA; border-radius:10px; padding:4px; margin-bottom:18px;
}
.auth-tabs button{
  background:transparent; border:0; padding:8px 12px;
  font-weight:700; font-size:14px; color:var(--muted);
  border-radius:8px; cursor:pointer; transition: all .15s ease;
}
.auth-tabs button.active{background:#fff; color:var(--ar-blue-deep); box-shadow: 0 1px 2px rgba(11,42,74,.08)}

.auth-pane .field{margin-bottom:10px}
.auth-row{
  display:flex; justify-content:space-between; align-items:center;
  margin:6px 0 12px; font-size:13px;
}
.auth-check{display:inline-flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:13px}
.auth-check input{margin-top:2px; width:16px; height:16px; accent-color: var(--ar-blue)}
.auth-link{color:var(--ar-blue-2); font-weight:600}
.auth-link:hover{color:var(--ar-blue-deep)}
.auth-submit{width:100%; margin-top:6px}
.auth-footer-line{margin:14px 0 0; text-align:center; font-size:13.5px; color:var(--muted)}
.auth-footer-line a{color:var(--ar-blue-2); font-weight:700; margin-left:4px}
.auth-error{
  background:#FEEBEC; color:#A0181D;
  border:1px solid #F4C7CA; border-radius:8px;
  padding:8px 12px; font-size:13px; margin:8px 0;
}

/* ---------- User chip (logged-in topbar) ---------- */
.auth-slot{display:inline-flex; align-items:center}
.user-chip{position:relative}
.user-toggle{
  background:transparent; border:1px solid var(--line); border-radius:30px;
  padding:4px 12px 4px 4px; font-size:13px; font-weight:700; color:var(--ar-blue-deep);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.user-toggle:hover{background:#F0F4FA}
.user-avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--ar-blue-deep); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; letter-spacing:.3px;
}
.user-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 10px 28px rgba(11,42,74,.14);
  list-style:none; margin:0; padding:6px; min-width:220px;
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:25;
}
.user-chip.open .user-menu{opacity:1; pointer-events:auto; transform: translateY(0)}
.user-menu li{margin:0}
.user-menu-head{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.user-menu-head strong{color:var(--ar-blue-deep); font-size:14px}
.user-menu-head span{color:var(--muted); font-size:12.5px}
.user-menu a, .user-menu button{
  display:block; width:100%; text-align:left;
  padding:8px 12px; background:transparent; border:0;
  font-size:14px; color:var(--text); border-radius:8px; cursor:pointer;
}
.user-menu a:hover, .user-menu button:hover{background:#F0F4FA; color:var(--ar-blue-deep)}
.user-menu button#logoutBtn{color:#A0181D}
.user-menu button#logoutBtn:hover{background:#FEEBEC}

/* RTL adjustments */
html[dir="rtl"] .topbar-actions{margin-left:0; margin-right:auto}
html[dir="rtl"] .topnav{margin-left:0; margin-right:18px}
html[dir="rtl"] .lang-menu{right:auto; left:0}
html[dir="rtl"] .lang-menu button{text-align:right}
html[dir="rtl"] .card-img .card-badges{left:auto; right:10px}
html[dir="rtl"] .pager{flex-direction:row-reverse}
html[dir="rtl"] body{font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif}
html[dir="rtl"] .user-menu{right:auto; left:0}
html[dir="rtl"] .user-menu a, html[dir="rtl"] .user-menu button{text-align:right}
html[dir="rtl"] .trust-phone{margin-left:0; margin-right:auto}

.btn{
  border:1px solid transparent; border-radius:10px;
  padding:10px 16px; font-weight:700; font-size:14px;
  transition: all .15s ease;
}
.btn-primary{background:var(--ar-blue-deep); color:#fff}
.btn-primary:hover{background:#143862}
.btn-ghost{background:transparent; color:var(--ar-blue-deep); border-color:var(--line)}
.btn-ghost:hover{background:#F0F4FA}
.btn-lg{padding:14px 22px; font-size:16px}
.btn-search{padding:12px 22px}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(116,172,223,.35), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(252,191,73,.18), transparent 60%),
    linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{max-width:1240px; margin:0 auto; padding:48px 20px 36px}
.hero h1{font-size:42px; line-height:1.1; margin:0 0 12px; color:var(--ar-blue-deep); letter-spacing:-.5px}
.hero h1 .accent{color:var(--ar-blue-2)}
.hero-sub{color:var(--muted); font-size:17px; margin:0 0 24px; max-width:760px}
.hero-stats{display:flex; gap:28px; margin-top:22px; flex-wrap:wrap}
.hero-stats > div{display:flex; flex-direction:column}
.hero-stats strong{font-size:22px; color:var(--ar-blue-deep)}
.hero-stats span{color:var(--muted); font-size:13px}

/* ---------- Search ---------- */
.search{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.search-row{display:grid; grid-template-columns: repeat(5, 1fr) auto; gap:10px}
.search-row select, .search-row input{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; font-size:14px; color:var(--text);
  min-width:0;
}
.search-row select:focus, .search-row input:focus{outline:2px solid var(--ar-blue); outline-offset:1px}
.search-row-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; grid-template-columns:none}
.chip{
  background:#F0F4FA; color:var(--ar-blue-deep);
  border:1px solid transparent; border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:600;
}
.chip:hover{background:#E2ECF7}
.chip.active{background:var(--ar-blue-deep); color:#fff}

/* ---------- Listings ---------- */
.listings{max-width:1240px; margin:0 auto; padding:32px 20px 48px}
.listings-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.listings h2{margin:0; font-size:24px; color:var(--ar-blue-deep)}
.listings-controls{display:flex; gap:10px; flex-wrap:wrap}
.listings-controls select{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:14px;
}

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}
.loading{color:var(--muted); padding:40px; text-align:center; grid-column:1/-1}

/* ---------- Card ---------- */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(11,42,74,.04);
  position:relative;
}
.card:hover{transform: translateY(-2px); box-shadow:var(--shadow-hover)}
.card-img{
  aspect-ratio: 16/10;
  background:#F0F4FA;
  position:relative; overflow:hidden;
}
.card-img img{width:100%; height:100%; object-fit:cover; display:block}
.card-img .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px; letter-spacing:.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.card-badges{position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap}
.badge{
  background:rgba(11,42,74,.85); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.3px;
}
.badge-seller{background:rgba(255,255,255,.95); color:var(--ar-blue-deep)}
.badge-good{background:var(--green)}
.badge-yellow{background:var(--ar-yellow); color:#3A2A00}

.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-title{font-weight:700; font-size:16px; color:var(--ar-blue-deep); margin:0; line-height:1.25}
.card-version{color:var(--muted); font-size:13px; min-height:1.1em}
.card-meta{
  display:flex; gap:10px; color:var(--muted); font-size:12.5px;
  margin-top:4px; flex-wrap:wrap;
}
.card-meta span{display:inline-flex; align-items:center; gap:4px}
.card-price{
  margin-top:10px; display:flex; align-items:baseline; gap:8px;
  padding-top:10px; border-top:1px dashed var(--line);
}
.card-price .usd{font-size:20px; font-weight:800; color:var(--text)}
.card-price .ars{font-size:12.5px; color:var(--muted)}
.card-loc{color:var(--muted); font-size:12px; margin-top:2px}
.card-cta{
  margin-top:12px; display:flex; gap:8px;
}
.card-cta .btn{flex:1; padding:9px 12px; font-size:13px}
.card-cta .btn-link{background:transparent; color:var(--ar-blue-2); border-color:transparent}

/* ---------- Pager ---------- */
.pager{display:flex; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap}
.pager button{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-weight:600; color:var(--ar-blue-deep);
}
.pager button.active{background:var(--ar-blue-deep); color:#fff; border-color:var(--ar-blue-deep)}
.pager button:disabled{opacity:.5; cursor:not-allowed}

/* ---------- Strip / CTA ---------- */
.strip{background:var(--ar-blue-deep); color:#fff; margin-top:24px}
.strip-inner{
  max-width:1240px; margin:0 auto; padding:28px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.strip h2{margin:0 0 4px; font-size:22px}
.strip p{margin:0; opacity:.85}
.strip .btn-primary{background:var(--ar-yellow); color:#3A2A00}
.strip .btn-primary:hover{background:var(--ar-yellow-2)}

/* ---------- Vender mi auto (sell form) ---------- */
.sell{
  background: linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sell-inner{
  max-width:1240px; margin:0 auto; padding:48px 20px;
  display:grid; grid-template-columns: 5fr 7fr; gap:36px;
}
.sell-copy .kicker{
  display:inline-block; background:var(--ar-yellow); color:#3A2A00;
  font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.sell-copy h2{
  font-size:32px; line-height:1.15; margin:14px 0 12px;
  color:var(--ar-blue-deep); letter-spacing:-.4px;
}
.sell-copy > p{color:var(--muted); font-size:16px; margin:0 0 18px}
.sell-bullets{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.sell-bullets li{
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:14px;
}
.sell-bullets li span{font-size:18px}

.sell-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.sell-form h3{margin:0 0 16px; color:var(--ar-blue-deep); font-size:20px}

.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.field span{font-weight:600; color:var(--ar-blue-deep)}
.field input, .field select, .field textarea{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:14px; color:var(--text); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--ar-blue); outline-offset:1px;
}
.field-wide{grid-column: 1 / -1}
.field.check{flex-direction:row; align-items:flex-start; gap:8px}
.field.check input{margin-top:3px; width:16px; height:16px}
.field.check span{font-weight:400; color:var(--muted)}
.field input:invalid:not(:placeholder-shown), .field select:invalid:not(:focus){
  border-color:var(--red);
}

.divider{grid-column:1/-1; height:1px; background:var(--line); margin:6px 0}

.form-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px;
}
.form-actions .btn-primary{background:var(--ar-yellow); color:#3A2A00; border-color:var(--ar-yellow)}
.form-actions .btn-primary:hover{background:var(--ar-yellow-2); border-color:var(--ar-yellow-2)}
.form-hint{color:var(--muted); font-size:12.5px}

.form-success{
  margin-top:14px; padding:14px;
  background:#E8F8F0; color:#0A5436;
  border:1px solid #BDE7D2; border-radius:10px; font-size:14px;
}
.form-success strong{color:#0A5436}

/* ---------- Cities (SEO) ---------- */
.cities{background:#fff; border-bottom:1px solid var(--line)}
.cities-inner{max-width:1240px; margin:0 auto; padding:36px 20px}
.cities h2{margin:0 0 4px; color:var(--ar-blue-deep); font-size:22px}
.cities-sub{color:var(--muted); margin:0 0 16px}
.cities-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:8px;
}
.cities-grid a{
  display:block; padding:10px 12px;
  background:#F0F4FA; border:1px solid var(--line); border-radius:10px;
  font-size:14px; color:var(--ar-blue-deep); font-weight:600;
}
.cities-grid a:hover{background:#E2ECF7; color:var(--ar-blue-deep)}

/* ---------- FAQ ---------- */
.faq{background:#F5F8FC; border-bottom:1px solid var(--line)}
.faq-inner{max-width:900px; margin:0 auto; padding:36px 20px}
.faq h2{color:var(--ar-blue-deep); margin:0 0 18px; font-size:24px; text-align:center}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; padding:14px 18px; transition: box-shadow .15s ease;
}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{
  font-weight:700; color:var(--ar-blue-deep); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; font-size:22px; color:var(--ar-blue-2); transition: transform .15s ease;
}
.faq details[open] summary::after{content:'−'}
.faq p{margin:10px 0 0; color:var(--text); line-height:1.5}

/* ---------- Features ---------- */
.features{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.features-inner{
  max-width:1240px; margin:0 auto; padding:36px 20px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
.features article{display:flex; flex-direction:column; gap:8px}
.ft-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.features h3{margin:6px 0 2px; color:var(--ar-blue-deep); font-size:16px}
.features p{margin:0; color:var(--muted); font-size:14px}

/* ---------- Footer ---------- */
.footer{background:#0B2A4A; color:#CFDBE8}

/* Brand chips strip across the top */
.footer-brands{background:#081F38; border-bottom:1px solid rgba(255,255,255,.06)}
.footer-brands-inner{
  max-width:1240px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.footer-brands-label{
  color:#9BB0C6; font-size:12px; letter-spacing:.4px; text-transform:uppercase; font-weight:700;
  flex-shrink:0;
}
.brand-chips{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.brand-chips li{
  background:rgba(255,255,255,.06); color:#E8F0F8;
  padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.08);
  cursor:default;
}
.brand-chips li:hover{background:rgba(252,191,73,.15); color:var(--ar-yellow); border-color:rgba(252,191,73,.4)}

.footer-inner{
  max-width:1240px; margin:0 auto; padding:40px 20px 24px;
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:32px;
}
.footer-col{display:flex; flex-direction:column}
.footer h4{
  color:#fff; margin:0 0 10px; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; font-weight:700;
}
.footer a{display:flex; align-items:center; gap:6px; color:#CFDBE8; padding:5px 0; font-size:14px}
.footer a:hover{color:var(--ar-yellow)}
.brand-footer{margin-bottom:12px}
.brand-footer .brand-name{color:#fff; font-size:22px}
.brand-footer .brand-tld{color:var(--ar-yellow)}
.footer p{margin:8px 0; font-size:14px; color:#CFDBE8}
.footer .small{font-size:13px; opacity:.85; display:flex; align-items:center; gap:6px}
.footer .small a{display:inline; padding:0}

.footer-social{display:flex; gap:8px; margin-top:14px}
.footer-social a{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:50%;
  color:#CFDBE8;
}
.footer-social a:hover{background:var(--ar-yellow); color:var(--ar-blue-deep)}

/* Trust + payment strip */
.footer-trust{border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)}
.footer-trust-inner{
  max-width:1240px; margin:0 auto; padding:18px 20px;
  display:grid; grid-template-columns: 1.6fr 1.4fr 1fr; gap:24px;
}
.trust-block{display:flex; flex-direction:column; gap:8px}
.trust-label{color:#9BB0C6; font-size:11px; letter-spacing:.5px; text-transform:uppercase; font-weight:700}
.pay-icons{display:flex; flex-wrap:wrap; gap:6px}
.pay{
  background:#fff; color:#0B2A4A; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:6px; letter-spacing:.3px;
}
.pay-bank{background:rgba(255,255,255,.95)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 20px;
  max-width:1240px; margin:0 auto;
  color:#9BB0C6; font-size:12.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.footer-legal a{display:inline; color:#9BB0C6; padding:0}
.footer-legal a:hover{color:var(--ar-yellow)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .topnav{display:none}
  .hero h1{font-size:32px}
  .search-row{grid-template-columns: 1fr 1fr; }
  .search-row .btn-search{grid-column: 1 / -1}
  .features-inner{grid-template-columns: repeat(2, 1fr)}
  .footer-inner{grid-template-columns: 1fr 1fr; gap:24px}
  .footer-trust-inner{grid-template-columns: 1fr; gap:16px}
  .sell-inner{grid-template-columns: 1fr; gap:24px}
  .cities-grid{grid-template-columns: repeat(2, 1fr)}
  .topnav a span{display:none}
  .brand-tag{display:none}
}
@media (max-width: 560px){
  .topbar-actions .btn-ghost{display:none}
  .hero-inner{padding:30px 16px 24px}
  .hero h1{font-size:26px}
  .search-row{grid-template-columns: 1fr}
  .hero-stats{gap:16px}
  .hero-stats strong{font-size:18px}
  .form-grid{grid-template-columns: 1fr}
  .sell-copy h2{font-size:24px}
  .cities-grid{grid-template-columns: 1fr}
  .trust-strip-inner{font-size:11.5px; gap:12px; padding:6px 16px}
  .trust-strip-inner > span:nth-child(n+3){display:none}
  .trust-phone{margin-left:0; margin-right:0}
  .footer-inner{grid-template-columns: 1fr}
  .footer-brands-inner{padding:14px 16px}
  .brand-chips li{font-size:11.5px; padding:4px 9px}
}