/* PathoHub home: three choices in the hero (new · used · sell), English / ગુજરાતી, and the PathoHub engineer guide */
:root{ --hp-p:#0e5b78; --hp-p2:#1b7fa3; --hp-ink:#13232f; --hp-mut:#4a5a66; --hp-line:#dbe5eb;
  --hp-e1:0 1px 2px rgba(19,35,47,.14), 0 1px 3px 1px rgba(19,35,47,.06); --hp-e3:0 10px 30px rgba(19,35,47,.16), 0 2px 6px rgba(19,35,47,.1); }

/* ---------- the three choices ---------- */
.phChoose{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:22px; max-width:820px; }
.phChooseQ{ grid-column:1 / -1; margin:0; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hp-p); }
.phCh{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:150px; padding:16px 16px 18px; border-radius:20px; text-decoration:none; color:var(--hp-ink);
  background:#fff; border:1.5px solid var(--hp-line); box-shadow:var(--hp-e1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden; }
.phCh:hover{ transform:translateY(-3px); box-shadow:var(--hp-e3); border-color:#9fc9da; }
.phCh:active{ transform:scale(.98); }
.phCh .ic{ flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; font-size:24px; background:#eef7fb; }
.phCh .tx{ display:flex; flex-direction:column; min-width:0; line-height:1.25; padding-right:6px; }
.phCh .tx b{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.phCh .tx small{ margin-top:4px; font-size:12.5px; color:var(--hp-mut); font-weight:500; }
.phCh .ar{ position:absolute; top:16px; right:16px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#eef7fb; font-size:18px; font-weight:700; color:var(--hp-p); transition:transform .2s; } .phCh:hover .ar{ transform:translateX(4px); }
.phCh.phNew{ color:#fff; border-color:transparent; background:linear-gradient(120deg, #0f766e 0%, #0e9f6e 55%, #22c55e 100%); box-shadow:0 12px 28px rgba(14,159,110,.32); }
.phCh.phNew .ic{ background:rgba(255,255,255,.2); } .phCh.phNew .tx small{ color:rgba(255,255,255,.9); } .phCh.phNew .ar{ color:#fff; background:rgba(255,255,255,.2); }
.phCh.phNew::after{ content:''; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-20deg); animation:hpShine 3.4s ease-in-out infinite; }
.phCh.phUsed .ic{ background:#e6f4ea; } .phCh.phSell .ic{ background:#fff4e0; }
@keyframes hpShine{ 0%, 55%{ left:-40%; } 85%, 100%{ left:130%; } }
@media (max-width:640px){ .phChoose{ grid-template-columns:1fr; } .phCh{ flex-direction:row; align-items:center; min-height:76px; padding:12px 54px 12px 12px; } .phCh .ar{ top:50%; margin-top:-17px; } }

/* ---------- language switch ---------- */
.hpLang{ flex:none; margin-right:10px; border:1.5px solid var(--hp-line); background:#fff; color:var(--hp-p); border-radius:999px; padding:7px 14px; min-height:38px; font:700 14px "Noto Sans Gujarati", Inter, system-ui, sans-serif; cursor:pointer; }
.hpLang:hover{ background:#f3f9fc; }
html.hpGu body{ font-family:Inter, "Noto Sans Gujarati", system-ui, sans-serif; }
html.hpGu h1, html.hpGu h2, html.hpGu h3, html.hpGu .accent-serif, html.hpGu .eyebrow{ font-family:"Bricolage Grotesque", Inter, "Noto Sans Gujarati", sans-serif; letter-spacing:0; }
html.hpGu .hero-title{ line-height:1.15; } html.hpGu .hero-title .line{ padding-bottom:.08em; } html.hpGu .section-lede, html.hpGu .hero-sub, html.hpGu .fc-sub{ line-height:1.75; }
html.hpGu .main-nav a{ font-size:15px; }

/* ---------- the PathoHub engineer on the home page ---------- */
.hpGuide{ position:fixed; right:12px; bottom:96px; z-index:70; display:flex; align-items:flex-end; gap:6px; pointer-events:none; }
.hpGuide > *{ pointer-events:auto; }
.hpMan{ border:0; background:none; padding:0; cursor:pointer; filter:drop-shadow(0 8px 14px rgba(19,35,47,.25)); animation:hpBob 3.2s ease-in-out infinite; }
.hpMan img{ height:126px; width:auto; display:block; }
@keyframes hpBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.hpBubble{ position:relative; display:none; width:min(330px, calc(100vw - 110px)); margin-bottom:58px; background:#fff; border-radius:18px 18px 4px 18px; padding:14px 14px 12px; box-shadow:var(--hp-e3);
  font-family:Inter, "Noto Sans Gujarati", system-ui, sans-serif; color:var(--hp-ink); }
.hpGuide.open .hpBubble{ display:block; animation:hpPop .35s cubic-bezier(.34,1.3,.64,1); }
@keyframes hpPop{ from{ transform:scale(.94); opacity:.4; } to{ transform:none; opacity:1; } }
.hpBubble small{ display:block; color:var(--hp-p); font-weight:700; font-size:11.5px; margin-bottom:2px; }
.hpBubble p{ margin:0 24px 0 0; font-size:14px; line-height:1.55; } .hpActs{ margin-top:10px; } .hpBubble:has(.hpSay) p{ margin-right:34px; }
.hpX{ position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; border-radius:50%; background:#eef4f7; cursor:pointer; font-size:12px; }
.hpSay{ position:absolute; bottom:8px; right:8px; width:32px; height:32px; border:0; border-radius:50%; background:#eef4f7; cursor:pointer; }
.hpActs{ display:flex; flex-direction:column; gap:6px; margin-right:34px; }
.hpActs a{ border:1px solid var(--hp-line); background:#fff; color:var(--hp-p); border-radius:12px; padding:8px 12px; font-size:13.5px; font-weight:600; text-decoration:none; }
.hpActs a:hover{ background:#f3f9fc; } .hpActs a.main{ background:var(--hp-p); color:#fff; border-color:var(--hp-p); }
@media (max-width:768px){ .hpMan img{ height:92px; } .hpBubble{ margin-bottom:42px; } .hpGuide{ bottom:136px; right:8px; } .hpLang{ padding:5px 10px; min-height:34px; font-size:13px; margin-right:6px; } }
@media (prefers-reduced-motion: reduce){ .hpMan, .phCh.phNew::after, .hpGuide.open .hpBubble{ animation:none; } }
/* Google review button under the proof numbers */
.hpReview{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:12px 18px; border-radius:999px; background:#fff; color:#0e5b78; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid #dbe5eb; box-shadow:0 6px 18px rgba(19,35,47,.08); }
.hpReview:hover{ background:#f3f9fc; }