/* ============================================================
   BLINDA CNH — Hub de Triagem (seleção de serviços)
   Premium dark · glassmorphism · navy + dourado
   ============================================================ */

:root{
  --navy:#101528;
  --navy-2:#0B1020;
  --bg:#080B14;
  --gold:#C3921C;
  --gold-bright:#E2B23E;
  --gold-deep:#9C7314;
  --white:#F6F8FC;
  --text:#E9ECF3;
  --muted:#AEB4C0;
  --muted-dim:#7C8595;

  --glass:rgba(255,255,255,.038);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --gold-soft:rgba(195,146,28,.12);
  --gold-line:rgba(195,146,28,.30);

  --shadow:0 24px 60px -22px rgba(0,0,0,.75);
  --shadow-gold:0 18px 50px -18px rgba(195,146,28,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 50% -12%, rgba(195,146,28,.13), transparent 58%),
    radial-gradient(900px 720px at 88% 12%, rgba(38,84,150,.20), transparent 60%),
    radial-gradient(820px 700px at 6% 86%, rgba(34,52,96,.30), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(16,21,40,.9), transparent 70%),
    var(--bg);
}
/* faint grid texture for "interface" feel */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(195,146,28,.32);color:#fff}

.hub{
  flex:1;width:100%;max-width:880px;margin:0 auto;
  padding:clamp(38px,7vw,72px) 22px 40px;
  display:flex;flex-direction:column;align-items:center;
}

/* ---------- topo / hero compacto ---------- */
.hub-top{text-align:center;margin-bottom:clamp(34px,5vw,52px);width:100%}
.hub-logo{height:118px;width:auto;margin:0 auto clamp(22px,4vw,30px)}
.hub-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:100px;
  background:var(--gold-soft);border:1px solid var(--gold-line);margin-bottom:22px;
  font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--gold-bright);white-space:nowrap;
}
.hub-badge svg{width:16px;height:16px}
.hub-top h1{
  font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.85rem,5vw,2.9rem);color:var(--white);margin-bottom:16px;
}
.hub-top h1 .gold{color:var(--gold)}
.hub-top p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.14rem);max-width:46ch;margin:0 auto}

/* ---------- grid de cards ---------- */
.cards{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:15px}

.svc{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  padding:22px 22px;border-radius:20px;
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s;
  opacity:0;transform:translateY(20px);
}
.svc.in{opacity:1;transform:none}
/* discreet texture inside each card */
.svc::before{
  content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;z-index:0;
  background:radial-gradient(closest-side, rgba(195,146,28,.16), transparent 70%);
  opacity:.6;transition:opacity .35s,transform .35s var(--ease);
}
.svc::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%);opacity:.6;
}
.svc:hover{
  transform:translateY(-4px);border-color:var(--gold-line);
  background:linear-gradient(150deg, rgba(195,146,28,.10), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.svc:hover::before{opacity:1;transform:scale(1.15)}

.svc-ic{
  position:relative;z-index:1;width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);
  transition:background .35s,color .35s,transform .35s var(--ease);
}
.svc-ic svg{width:26px;height:26px}
.svc:hover .svc-ic{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1303;transform:scale(1.05)}

.svc-tx{position:relative;z-index:1;flex:1;min-width:0}
.svc-tx h3{
  font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.01em;
  font-size:1.1rem;color:var(--white);margin-bottom:3px;line-height:1.2;
}
.svc-tx p{font-size:.85rem;color:var(--muted);line-height:1.35}

.svc-arrow{
  position:relative;z-index:1;width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line-strong);color:var(--muted);
  transition:all .35s var(--ease);
}
.svc-arrow svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.svc:hover .svc-arrow{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.svc:hover .svc-arrow svg{transform:translateX(3px)}

/* destaque: Falar com Especialista (full-width, whatsapp) */
.svc.featured{
  grid-column:1 / -1;
  background:linear-gradient(150deg, rgba(31,168,83,.14), rgba(255,255,255,.025));
  border-color:rgba(31,168,83,.30);
}
.svc.featured::before{background:radial-gradient(closest-side, rgba(31,168,83,.22), transparent 70%)}
.svc.featured:hover{
  background:linear-gradient(150deg, rgba(31,168,83,.22), rgba(255,255,255,.03));
  border-color:rgba(31,168,83,.5);
}
.svc.featured .svc-ic{background:rgba(31,168,83,.16);border-color:rgba(31,168,83,.35);color:#36d07a}
.svc.featured:hover .svc-ic{background:#1fa853;color:#fff}
.svc.featured .svc-arrow{color:#36d07a}
.svc.featured:hover .svc-arrow{background:rgba(31,168,83,.18);border-color:rgba(31,168,83,.4);color:#36d07a}

/* ---------- rodapé ---------- */
.hub-foot{
  width:100%;max-width:880px;margin:clamp(40px,6vw,64px) auto 0;padding:26px 22px 34px;
  border-top:1px solid var(--line);text-align:center;
}
.hub-foot .fname{font-family:'Space Grotesk',sans-serif;font-weight:600;color:#fff;font-size:1.02rem;letter-spacing:.02em}
.hub-foot .ftag{color:var(--muted);font-size:.88rem;margin-top:6px}
.hub-foot .flinks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 16px}
.hub-foot .flinks a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;
  background:var(--glass);border:1px solid var(--line);color:var(--text);font-size:.86rem;font-weight:500;
  transition:all .25s var(--ease);
}
.hub-foot .flinks a:hover{border-color:var(--gold-line);background:var(--gold-soft);color:#fff;transform:translateY(-2px)}
.hub-foot .flinks a svg{width:16px;height:16px;color:var(--gold)}
.hub-foot .fmeta{color:var(--muted-dim);font-size:.78rem;line-height:1.7}
.hub-foot .fmeta span{white-space:nowrap}
.hub-foot .fmeta .dot{margin:0 8px;opacity:.5}

/* ---------- responsive ---------- */
@media (max-width:680px){
  .cards{grid-template-columns:1fr;gap:13px}
  .svc{padding:18px 18px;gap:15px;border-radius:18px}
  .svc-ic{width:48px;height:48px;border-radius:14px}
  .svc-ic svg{width:24px;height:24px}
  .svc-tx h3{font-size:1.04rem}
  .hub-logo{height:96px}
  .hub-foot .fmeta .dot{display:none}
  .hub-foot .fmeta span{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .svc{opacity:1;transform:none}
}