/* ═══════════════════════════════════════════════════════════════
   PragatiCRM — Industry pages shared styles (after css/home.css)
   Used by: manufacturing, trading, pharma, jewellers, construction,
            retail, fmcg, auto, service
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero (never name this .hero/.hero-mfg/.pd-hero — app.js trap) */
.ind-page-hero{padding:9rem 0 4rem;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 85% 0%,rgba(240,122,48,.12),transparent 60%),
    radial-gradient(700px 420px at -5% 100%,rgba(30,58,95,.06),transparent 55%),
    var(--bg)}
.ind-page-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(60,38,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,38,15,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  pointer-events:none}
.ind-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .9fr;gap:2.5rem;align-items:center}
.ind-hero-grid h1{margin:1.1rem 0 1.2rem;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.14}
.ind-hero-sub{font-size:1.08rem;color:var(--ink-2);max-width:540px;margin-bottom:1.9rem;line-height:1.75}
.ind-hero-visual{display:flex;justify-content:center;align-items:center}
.ind-hero-visual dotlottie-player{width:460px;height:460px;max-width:100%;margin:-3rem 0;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(60,38,15,.14))}

/* ─── Use-case cards ────────────────────────────────────────────── */
.use-case{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;height:100%}
.use-case:hover{border-color:#F0C7A8;box-shadow:var(--shadow-md);transform:translateY(-4px)}
.uc-icon{width:48px;height:48px;border-radius:13px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.uc-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.uc-body{font-size:.85rem;color:var(--ink-2);line-height:1.6}

/* ─── Before / After pain-answer ────────────────────────────────── */
.pain-answer{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
.pa-pain{background:var(--red-soft);border:1px solid #F2CBCB;border-radius:var(--r);padding:1.2rem 1.4rem}
.pa-pain strong{font-size:.68rem;color:var(--red);display:block;margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.pa-pain p{font-size:.88rem;color:#9B3030;font-style:italic;line-height:1.65}
.pa-fix{background:var(--green-soft);border:1px solid #BFE8D2;border-radius:var(--r);padding:1.2rem 1.4rem}
.pa-fix strong{font-size:.68rem;color:var(--green);display:block;margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.pa-fix p{font-size:.88rem;color:#11603A;line-height:1.65}
.pain-stack{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem}

/* ─── Flow visual ───────────────────────────────────────────────── */
.flow-visual{display:flex;align-items:flex-start;justify-content:flex-start;gap:0;overflow-x:auto;padding:1.5rem 0;-webkit-overflow-scrolling:touch}
.fv-step{flex-shrink:0;text-align:center;width:128px}
.fv-box{width:84px;height:84px;border-radius:22px;margin:0 auto .7rem;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--bg-card);border:1.5px solid var(--line-2);box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.23,1,.32,1),border-color .3s ease,box-shadow .3s ease}
.fv-step:hover .fv-box{border-color:var(--brand);transform:scale(1.07) translateY(-3px);box-shadow:0 10px 24px rgba(212,82,10,.25)}
.fv-box.hot{background:linear-gradient(180deg,#E05E14,#C94D08);border-color:transparent}
.fv-box.ok{background:var(--green-soft);border-color:#BFE8D2}
.fv-label{font-size:.8rem;font-weight:700;color:var(--ink)}
.fv-desc{font-size:.7rem;color:var(--muted);margin-top:.2rem;line-height:1.4}
.fv-arrow{flex-shrink:0;font-size:1.1rem;color:var(--line-2);padding:0 .3rem;margin-top:2rem}

/* ─── Feature checklist rows (rich pages) ───────────────────────── */
.ind-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.ind-check{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--line);transition:border-color .2s ease,box-shadow .2s ease}
.ind-check:hover{border-color:#F0C7A8;box-shadow:var(--shadow-sm)}
.ind-check svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--green)}
.ind-check div{font-size:.87rem;color:var(--ink);line-height:1.5}

/* ─── Highlight stat band (rich pages) ──────────────────────────── */
.ind-band{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ─── Quote card ────────────────────────────────────────────────── */
.ind-quote{max-width:720px;margin:0 auto;text-align:center;font-family:var(--font-display);font-style:italic;font-size:1.15rem;line-height:1.7;color:var(--ink);padding:2rem;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .ind-page-hero{padding:8rem 0 3rem}
  .ind-hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .ind-hero-visual{order:-1}
  .ind-hero-visual dotlottie-player{width:340px;height:340px;margin:-2rem 0}
}
@media(max-width:768px){
  .ind-page-hero{padding:7.5rem 0 2.5rem}
  .pain-answer{grid-template-columns:1fr}
  .ind-check-grid{grid-template-columns:1fr}
  .ind-hero-visual dotlottie-player{width:300px;height:300px;margin:-1.5rem 0}
  .fv-step{width:112px}
  .fv-box{width:74px;height:74px;border-radius:18px}
  .grid-3{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:480px){
  .use-case{flex-direction:column}
}
