/* VinNumber homepage v2 (interactive) — loaded ONLY on the homepage (EN + ES).
   Every rule is scoped to body.page-home and/or hv- prefixed classes. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700 800;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}

body.page-home{
  --hv-g:#2da44e; --hv-gd:#218838; --hv-gl:#e8f5ec; --hv-vb:#dceef8; --hv-vb2:#b8d9ef;
  --hv-bd:#e5e7eb; --hv-mut:#6b7280; --hv-ink:#161a18;
  --hv-band-green:#EAF7EF; --hv-band-gray:#F4F5F7;
  background:#fff; color:var(--hv-ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
.page-home .hv-main{display:block}
.page-home .hv-main a{text-decoration:none}
.page-home .hv-main button{font-family:inherit}
.page-home .hv-wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* —— hero —— */
.page-home .hv-hero{background:#fff; padding:40px 0 48px}
.page-home .hv-badge{display:inline-block; font-size:12px; font-weight:600; color:var(--hv-gd); background:var(--hv-gl); padding:5px 12px; border-radius:999px; margin-bottom:16px; letter-spacing:.02em}
.page-home .hv-intro{margin-bottom:16px; max-width:720px}
.page-home .hv-intro h1{font-weight:750; letter-spacing:-.03em; line-height:1.15; font-size:clamp(22px,2.6vw,34px); margin:0 0 10px; color:var(--hv-ink)}
.page-home .hv-intro h1 em{font-style:normal; color:var(--hv-g)}
.page-home .hv-lead{margin:12px 0 0; color:var(--hv-mut); line-height:1.55; font-size:17px; max-width:560px}
.page-home .hv-grid{position:relative; width:100%; padding-bottom:28px}
.page-home .hv-stage{perspective:1200px; width:100%}
.page-home .hv-panel{background:#fff; border:1px solid var(--hv-bd); border-radius:20px; padding:22px 24px; padding-right:clamp(24px,18%,200px); box-shadow:0 12px 40px rgba(20,34,26,.08); transform-style:preserve-3d; transition:box-shadow .25s,transform .2s ease-out; will-change:transform; width:100%}
.page-home .hv-panel:hover{box-shadow:0 18px 50px rgba(20,34,26,.12)}
.page-home .hv-label-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hv-mut)}
.page-home .hv-chip{font-size:11px; font-weight:700; color:var(--hv-gd); background:var(--hv-gl); padding:4px 8px; border-radius:6px; text-transform:none; letter-spacing:0; cursor:pointer; border:0}
.page-home .hv-search{display:flex; background:#f9faf9; border:1.5px solid var(--hv-bd); border-radius:12px; overflow:hidden; transition:border-color .15s,box-shadow .15s}
.page-home .hv-search:focus-within{border-color:var(--hv-g); box-shadow:0 0 0 3px rgba(45,164,78,.12); background:#fff}
.page-home .hv-search input{flex:1; border:0; outline:0; font:600 18px Inter,sans-serif; padding:16px 18px; color:var(--hv-ink); background:transparent; min-width:0; letter-spacing:.08em; font-variant-numeric:tabular-nums; text-transform:uppercase; box-shadow:none; border-radius:0}
.page-home .hv-search input::placeholder{color:#9aa39c; letter-spacing:0; font-weight:500; text-transform:none}
.page-home .hv-btn-decode{background:var(--hv-g); color:#fff; border:0; padding:0 26px; font:700 15px Inter,sans-serif; white-space:nowrap; cursor:pointer; transition:background .15s; border-radius:0}
.page-home .hv-btn-decode:hover{background:var(--hv-gd)}
.page-home .hv-btn-decode:disabled{opacity:.7}
.page-home .hv-hint{margin:10px 0 0; font-size:13px; color:#8a938c; min-height:20px}
.page-home .hv-hint.warn{color:#b45309; font-weight:500}
.page-home .hv-hint.ok{color:var(--hv-gd); font-weight:500}
.page-home .hv-cells{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.page-home .hv-cell{width:38px; height:52px; border-radius:10px; border:1.5px solid var(--hv-bd); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; position:relative; transition:transform .2s,border-color .2s,background .2s,box-shadow .2s; color:var(--hv-ink)}
.page-home .hv-cell b{font-size:18px; font-weight:700; line-height:1; min-height:18px}
.page-home .hv-cell s{font-size:9px; color:#8a938c; text-decoration:none; margin-top:4px}
.page-home .hv-cell.empty b{color:#d0d5d0}
.page-home .hv-cell.wmi{background:var(--hv-g); border-color:var(--hv-g); color:#fff}
.page-home .hv-cell.wmi s{color:rgba(255,255,255,.75)}
.page-home .hv-cell.vis{background:var(--hv-vb); border-color:var(--hv-vb2)}
.page-home .hv-cell.filled{animation:hvPulse .45s ease}
.page-home .hv-cell.scrambling b{animation:hvFlip .12s linear infinite}
.page-home .hv-cell.hl{transform:translateY(-3px); box-shadow:0 6px 14px rgba(20,34,26,.12)}
@keyframes hvPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(45,164,78,.4)}40%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(45,164,78,.15)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
@keyframes hvFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);opacity:.3}100%{transform:rotateX(0);opacity:1}}
.page-home .hv-groups{display:flex; gap:28px; margin-top:14px; font-size:13px; color:var(--hv-mut); flex-wrap:wrap}
.page-home .hv-groups > div{display:flex; align-items:center; gap:8px; cursor:default}
.page-home .hv-groups i{width:10px; height:10px; border-radius:3px; display:inline-block}
.page-home .hv-groups .gw{background:var(--hv-g)}
.page-home .hv-groups .gd{background:#fff; border:1px solid var(--hv-bd)}
.page-home .hv-groups .gs{background:var(--hv-vb); border:1px solid var(--hv-vb2)}
.page-home .hv-groups b{color:var(--hv-ink); font-weight:700}
.page-home .hv-cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px}
.page-home .hv-btn{display:inline-flex; align-items:center; justify-content:center; background:var(--hv-g); color:#fff; border:0; border-radius:10px; padding:13px 20px; font:700 14px Inter,sans-serif; cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s; text-decoration:none}
.page-home .hv-btn:hover{box-shadow:0 8px 20px rgba(45,164,78,.28); color:#fff; text-decoration:none}
.page-home .hv-btn-ghost{background:transparent; color:var(--hv-ink); border:1.5px solid var(--hv-bd)}
.page-home .hv-btn-ghost:hover{border-color:var(--hv-g); color:var(--hv-g); box-shadow:none}
.page-home .hv-cta-row span{font-size:13px; color:var(--hv-mut)}

/* real decode result */
.page-home .hv-result{border:1px solid var(--hv-bd); border-radius:14px; background:linear-gradient(180deg,#fafcfb,#fff); overflow:hidden; display:none}
.page-home .hv-result.show{display:block; margin-top:18px; animation:hvIn .45s ease}
@keyframes hvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-home .hv-result-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 16px; background:var(--hv-gl); border-bottom:1px solid #d5ebd9; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hv-gd)}
.page-home .hv-result-title{padding:16px 16px 0; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--hv-ink)}
.page-home .hv-result-body{padding:14px 16px 18px; display:grid; gap:12px}
.page-home .hv-result-body{grid-template-columns:1fr 1fr}
.page-home .hv-rf:first-child{grid-column:1/-1}
.page-home .hv-rf{padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--hv-bd); min-width:0}
.page-home .hv-rf .k{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hv-mut); margin-bottom:4px}
.page-home .hv-rf .v{font-size:15px; font-weight:700; overflow-wrap:anywhere}
.page-home .hv-rf .v i{font-style:normal; padding:1px 5px; border-radius:4px}
.page-home .hv-rf .v i.w{background:var(--hv-g); color:#fff}
.page-home .hv-rf .v i.d{border:1px solid var(--hv-bd)}
.page-home .hv-rf .v i.s{background:var(--hv-vb)}
.page-home .hv-recalls{margin:0 16px 16px; padding:14px 16px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa}
.page-home .hv-recalls h3{font-size:14px; font-weight:700; color:#9a3412; margin:0 0 8px}
.page-home .hv-recall{padding:8px 0; border-top:1px solid #fde2c4}
.page-home .hv-recall:first-of-type{border-top:0}
.page-home .hv-recall b{display:block; font-size:12px; letter-spacing:.03em; color:#7c2d12}
.page-home .hv-recall p{font-size:13px; color:#57534e; line-height:1.45; margin:4px 0 0}
.page-home .hv-recalls.ok{background:var(--hv-gl); border-color:#cfe9d6; color:var(--hv-gd); font-size:14px; font-weight:600}
.page-home .hv-full{margin:0 16px 16px; padding:16px; border-radius:12px; background:#161a18; color:#e8ebe8; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.page-home .hv-full p{margin:0; font-size:14px; line-height:1.5; color:#c5d1c8; flex:1 1 280px}
.page-home .hv-full .hv-btn{flex-shrink:0}
.page-home .hv-result-error{padding:14px 16px; color:#b45309; font-weight:600; font-size:14px; background:#fffbeb}

/* Vinny */
.page-home .hv-visual{position:absolute; right:8px; top:84px; bottom:auto; z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; width:150px; pointer-events:none}
.page-home .hv-visual .hv-vinny, .page-home .hv-visual .hv-speech{pointer-events:auto}
.page-home .hv-vinny{position:relative; width:140px; z-index:5; cursor:pointer; filter:drop-shadow(0 10px 18px rgba(20,34,26,.18)); animation:hvBob 3.2s ease-in-out infinite; transform-origin:50% 90%; background:none; border:0; padding:0}
.page-home .hv-vinny img{display:block; width:100%; height:auto}
.page-home .hv-vinny.wave{animation:hvWave .7s ease}
@keyframes hvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hvWave{0%{transform:translateY(0) rotate(0)}20%{transform:translateY(-4px) rotate(-8deg)}40%{transform:translateY(-10px) rotate(10deg)}60%{transform:translateY(-4px) rotate(-6deg)}80%{transform:translateY(-6px) rotate(4deg)}100%{transform:translateY(0) rotate(0)}}
.page-home .hv-speech{position:relative; width:100%; background:#fff; border:1px solid var(--hv-bd); border-radius:14px; padding:9px 11px; font-size:11px; font-weight:600; line-height:1.35; color:var(--hv-ink); box-shadow:0 8px 24px rgba(20,34,26,.1); text-align:center; order:-1}
.page-home .hv-speech small{display:block; margin-top:3px; font-size:10px; font-weight:500; color:var(--hv-mut)}
.page-home .hv-speech::after{content:""; position:absolute; left:50%; bottom:-6px; width:11px; height:11px; background:#fff; border-right:1px solid var(--hv-bd); border-bottom:1px solid var(--hv-bd); transform:translateX(-50%) rotate(45deg)}
.page-home .hv-vlabel{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hv-mut); text-align:center; margin-top:-2px}
@media(max-width:899px){
  .page-home .hv-panel{padding-right:24px; padding-bottom:28px}
  .page-home .hv-visual{position:relative; right:auto; bottom:auto; top:auto; width:100%; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; margin-top:14px}
  .page-home .hv-vinny{width:100px; flex-shrink:0; order:-1}
  .page-home .hv-speech{order:0; flex:1; text-align:left; border-radius:14px 14px 14px 4px; font-size:12px}
  .page-home .hv-speech::after{left:-6px; bottom:16px; transform:rotate(45deg); border-right:0; border-left:1px solid var(--hv-bd)}
  .page-home .hv-vlabel{display:none}
}

/* —— bands —— */
.page-home .hv-band{padding:56px 0}
.page-home .hv-band-white{background:#fff}
.page-home .hv-band-green{background:var(--hv-band-green)}
.page-home .hv-band-gray{background:var(--hv-band-gray)}
.page-home .hv-band h2{font-size:clamp(22px,3vw,28px); font-weight:700; letter-spacing:-.03em; margin:0 0 8px; color:var(--hv-ink); line-height:1.2}
.page-home .hv-sub{color:var(--hv-mut); font-size:15px; margin:0 0 28px; max-width:640px; line-height:1.5}
.page-home .hv-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hv-mut); margin:0 0 12px}
.page-home .hv-kicker.g{color:var(--hv-g); font-weight:600; letter-spacing:.06em; margin-bottom:8px}

.page-home .hv-bento{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.page-home .hv-tile{border:1.5px solid #d5ebd9; border-radius:14px; padding:20px 18px; background:#fff; min-height:140px; transition:border-color .25s,box-shadow .25s,transform .25s}
.page-home .hv-tile .ic{width:32px; height:32px; border-radius:8px; background:var(--hv-gl); color:var(--hv-g); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-bottom:14px}
.page-home .hv-tile h3{font-size:15px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em}
.page-home .hv-tile p{font-size:13px; color:var(--hv-mut); line-height:1.45; margin:0}
.page-home .hv-tile:hover{border-color:var(--hv-g); box-shadow:0 0 0 3px rgba(45,164,78,.12),0 12px 28px rgba(45,164,78,.1); transform:translateY(-3px)}

.page-home .hv-steps{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:720px){.page-home .hv-steps{grid-template-columns:repeat(3,1fr); gap:20px}}
.page-home .hv-step{background:#fff; border:1px solid var(--hv-bd); border-radius:16px; padding:24px 22px; transition:transform .25s,box-shadow .25s}
.page-home .hv-step .n{width:36px; height:36px; border-radius:10px; background:var(--hv-g); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-bottom:16px}
.page-home .hv-step h3{font-size:16px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em}
.page-home .hv-step p{font-size:14px; color:var(--hv-mut); line-height:1.5; margin:0}
.page-home .hv-step:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,34,26,.08)}

.page-home .hv-arts{display:grid; gap:24px}
@media(min-width:720px){.page-home .hv-arts{grid-template-columns:1fr 1fr}}
.page-home .hv-ar{display:block; border:1px solid var(--hv-bd); border-radius:12px; padding:16px 18px; margin-bottom:10px; background:#fff; color:var(--hv-ink); transition:transform .25s,box-shadow .25s}
.page-home .hv-ar h3{font-size:14px; font-weight:700; line-height:1.35; margin:0; position:relative; display:inline; color:var(--hv-ink)}
.page-home .hv-ar h3::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--hv-g); transition:width .3s ease}
.page-home .hv-ar p{font-size:13px; color:var(--hv-mut); line-height:1.45; margin:8px 0 0}
.page-home .hv-more{font-size:14px; font-weight:600; color:var(--hv-g); margin-top:8px; display:inline-block}
.page-home .hv-ar:hover{transform:perspective(600px) rotateX(2deg) rotateY(-2deg) translateY(-2px); box-shadow:0 12px 28px rgba(20,34,26,.1); text-decoration:none}
.page-home .hv-ar:hover h3::after{width:100%}
.page-home .hv-viewall{font-size:14px; font-weight:600; color:var(--hv-g); display:inline-block; margin-top:6px}
.page-home .hv-viewall:hover{text-decoration:underline}

.page-home .hv-makes{display:grid; grid-template-columns:repeat(8,1fr); gap:12px}
.page-home .hv-make{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#fff; border:1.5px solid #d5ebd9; border-radius:14px; padding:16px 8px 12px; color:var(--hv-ink); transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
.page-home .hv-make img{width:72px; height:44px; object-fit:contain; display:block}
.page-home .hv-make span{font-size:12px; font-weight:600; color:var(--hv-mut); white-space:nowrap; transition:color .2s}
.page-home .hv-make:hover{transform:translateY(-4px); border-color:var(--hv-g); box-shadow:0 10px 20px rgba(45,164,78,.15); text-decoration:none}
.page-home .hv-make:hover span{color:var(--hv-g)}
.page-home .hv-makes-all{margin-top:20px}
@media(max-width:900px){.page-home .hv-makes{grid-template-columns:repeat(4,1fr)}}

.page-home .hv-prose p{font-size:16px; line-height:1.65; color:#2a332e; margin:0 0 18px}
.page-home .hv-prose p:last-child{margin-bottom:0}
.page-home .hv-prose strong{color:#142019; font-weight:700}
.page-home .hv-prose em{font-style:italic}
.page-home .hv-prose u{text-decoration-color:var(--hv-g); text-underline-offset:3px}
.page-home #why-check{border-top:1px solid var(--hv-bd)}

.page-home .hv-faq{display:grid; gap:10px; width:100%}
.page-home .hv-faq details{border:1px solid var(--hv-bd); border-radius:12px; background:#fff; padding:14px 18px}
.page-home .hv-faq summary{font-weight:600; font-size:14px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; color:var(--hv-ink)}
.page-home .hv-faq summary::-webkit-details-marker{display:none}
.page-home .hv-faq summary::after{content:"+"; color:var(--hv-g); font-weight:700}
.page-home .hv-faq details[open] summary::after{content:"–"}
.page-home .hv-faq details p{margin:10px 0 0; font-size:13px; color:var(--hv-mut); line-height:1.5}

/* align the shared header with the 1180px home wrap (desktop only) */
@media(min-width:900px){ .page-home .site-header .container{max-width:1180px; padding:0 28px} }

/* —— footer (home only; same markup as every page) —— */
.page-home .site-footer{background:#161a18; color:#c5d1c8; padding:48px 0 28px; margin:0; text-align:left}
.page-home .site-footer .container{max-width:1180px; padding:0 28px}
.page-home .site-footer .footer-grid{grid-template-columns:1.4fr repeat(4,1fr); gap:28px; margin-bottom:0; text-align:left; justify-items:start}
.page-home .site-footer .footer-brand .site-logo{font-size:18px}
.page-home .site-footer .footer-brand p{font-size:14px; color:#9aaba0}
.page-home .site-footer .footer-links h4{font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px}
.page-home .site-footer .footer-links a{font-size:14px; color:#c5d1c8}
.page-home .site-footer .footer-links a:hover{color:#fff}
.page-home .site-footer .footer-bottom{margin-top:28px; padding-top:20px; border-top:1px solid #2a322e; font-size:13px; color:#8a9a90; text-align:left}
.page-home .site-footer .footer-bottom p{margin:0}
@media(max-width:900px){ .page-home .site-footer{padding:40px 0 24px} .page-home .site-footer .footer-grid{grid-template-columns:1fr 1fr; gap:24px} }
@media(max-width:520px){ .page-home .site-footer .footer-grid{grid-template-columns:1fr} }

/* —— mobile —— */
@media(max-width:720px){
  .page-home .hv-wrap{padding:0 16px}
  .page-home .hv-hero{padding:28px 0 36px}
  .page-home .hv-panel{padding:18px 16px 22px; border-radius:16px}
  .page-home .hv-search{flex-direction:column}
  .page-home .hv-btn-decode{padding:14px; border-radius:0 0 10px 10px}
  .page-home .hv-cells{gap:4px}
  .page-home .hv-cell{width:calc((100% - 32px)/9); min-width:26px; height:44px; border-radius:8px}
  .page-home .hv-cell b{font-size:14px; min-height:14px}
  .page-home .hv-groups{gap:10px 18px}
  .page-home .hv-cta-row{flex-direction:column; align-items:stretch}
  .page-home .hv-cta-row .hv-btn{width:100%}
  .page-home .hv-cta-row span{text-align:center}
  .page-home .hv-band{padding:44px 0}
  .page-home .hv-bento{grid-template-columns:1fr 1fr; gap:10px}
  .page-home .hv-tile{min-height:0; padding:16px 14px}
  .page-home .hv-tile .ic{margin-bottom:10px}
  .page-home .hv-result-body{gap:8px; padding:12px}
  .page-home .hv-rf{padding:8px 10px}
  .page-home .hv-rf .v{font-size:14px}
  .page-home .hv-full .hv-btn{width:100%}
  .page-home .hv-lead{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .page-home .hv-vinny{animation:none}
  .page-home .hv-cell.filled,.page-home .hv-cell.scrambling b{animation:none}
}