/* HireAIVoice enhancement layer. Additive only. Loaded after the inline <style>. */

/* ---------- 1. Grain + gradient texture ---------- */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

.hero,.alt,.who,.final{position:relative;isolation:isolate}
.hero::before,.alt::before,.who::before,.final::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);mix-blend-mode:multiply;opacity:.055}
.who::before,.final::before{mix-blend-mode:overlay;opacity:.10}

.hero{background:
  radial-gradient(900px 420px at 12% -8%, #dbeafe 0%, rgba(219,234,254,0) 62%),
  radial-gradient(760px 400px at 96% 8%, #d8f3e4 0%, rgba(216,243,228,0) 60%),
  linear-gradient(180deg,#eff6fb,#fff) !important}
.alt{background:
  radial-gradient(700px 340px at 88% 0%, #eaf3fb 0%, rgba(234,243,251,0) 64%),
  var(--alt) !important}
.who,.final{background:
  radial-gradient(680px 340px at 8% 0%, #1d3a2b 0%, rgba(29,58,43,0) 62%),
  var(--ink) !important}

/* ---------- 2. Hover / focus response ---------- */
@media(hover:hover){
  .price,.phone,.dial{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
  .price:hover,.dial:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(18,25,31,.07),0 24px 48px rgba(18,25,31,.13)}
  .phone:hover{transform:translateY(-4px) rotate(-.4deg)}
  .btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,125,60,.26)}
  .btn-alt:hover{box-shadow:0 8px 20px rgba(11,95,165,.2)}
  .step .n{transition:transform .2s ease}
  .step:hover .n{transform:scale(1.1)}
  .faq{transition:background .18s ease,padding-left .18s ease}
  .faq:hover{background:#fafcfe;padding-left:10px}
  .num{transition:transform .18s ease}
  .num:hover{transform:scale(1.03)}
}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- 3. Scroll reveal. Content is VISIBLE unless JS is alive. ---------- */
html.js .rv{opacity:0;transform:translateY(12px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

/* ---------- 4. Charts ---------- */
.chart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.chart h3{margin-bottom:.15em}
.chart .cap{font-size:.88rem;color:var(--soft);margin:0 0 16px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{stroke:#cfd8e2;stroke-width:1}
.chart .tick{fill:#8b98a5;font-size:11px}
.chart .lbl{fill:var(--soft);font-size:12px;font-weight:600}
.chart .curve{fill:none;stroke-width:3;stroke-linecap:round}
html.js .chart .curve{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.js .chart.in .curve{transition:stroke-dashoffset 1.25s ease .1s;stroke-dashoffset:0}
html.js .chart .bar{transform:scaleY(0);transform-origin:bottom}
html.js .chart.in .bar{transition:transform .7s cubic-bezier(.2,.7,.3,1) calc(var(--i)*.08s);transform:scaleY(1)}

/* ---------- 5. Sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(18,25,31,.10);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
.callbar .in{display:flex;gap:9px;max-width:560px;margin:0 auto}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;
  border-radius:11px;font-weight:750;font-size:1rem;text-decoration:none;line-height:1.15;text-align:center}
.callbar .c{background:var(--go);color:#fff}
.callbar .s{background:#fff;color:var(--accent);border:2px solid var(--accent)}
@media(max-width:820px){.callbar{display:block}body{padding-bottom:78px}
}

/* ---------- 6. Live voice widget (HonorElevate), desktop only ----------
   On a phone the better action is tapping the real demo line, which is the
   actual product. The sticky call bar owns mobile; the widget owns desktop.
   No collision, and each surface gets the CTA that fits it. */
@media(max-width:820px){
  chat-widget{display:none !important}
}

/* ---------- 7. Reduced motion wins over everything above ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv.in{opacity:1;transform:none;transition:none}
  html.js .chart .curve{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  html.js .chart .bar{transform:none;transition:none}
  *{scroll-behavior:auto !important}
  .price:hover,.dial:hover,.phone:hover,.btn:hover,.num:hover{transform:none}
}