/* =========================================================
   INDUSTRY.CSS — Master Industry Template (cpa-firms.html and,
   going forward, accounting-firms / bookkeeping-firms / enrolled-
   agents / tax-professionals / advisory-firms — only content
   changes). Deliberately distinct from service.css and
   partnership.css: dashboard-style hero console, red-to-teal
   challenge cards, ringed bento badges, arrow-linked vertical
   workflow, circular tech badges, and glass KPI panels. Reuses
   main.css primitives (hero mechanics, buttons, cta-band, acc-item)
   and home.css cross-page primitives (card-gradient, mini-grid,
   impact-grid — already shared by Home/About, not owned by any one
   template) but owns every component below.
   ========================================================= */

/* ---------- Hero: diagonal mesh, no photo ---------- */
.hero.hero-ind{ background-image:none; background-color: var(--ink); }
.hero.hero-ind::before{
  background:
    radial-gradient(50% 55% at 12% 8%, rgba(10,154,144,.32), transparent 60%),
    radial-gradient(55% 60% at 95% 92%, rgba(13,48,90,.45), transparent 65%),
    linear-gradient(135deg, transparent 42%, rgba(10,154,144,.07) 50%, transparent 58%),
    linear-gradient(180deg, rgba(14,21,38,.97), rgba(14,21,38,.92) 55%, rgba(14,21,38,1));
}

/* ---------- Hero: console panel (dashboard mockup, not a card stack) ---------- */
.console-panel{
  position:relative; background: rgba(22,32,58,.55);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border:1px solid var(--ink-line); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-lift);
}
.cp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.cp-live{ display:flex; align-items:center; gap:8px; font-family: var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(247,245,240,.55); }
.cp-live::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(10,154,144,.25); animation: badgeDot 2s infinite; }
.cp-tag{ font-family: var(--f-mono); font-size:.68rem; color: var(--teal); background: rgba(10,154,144,.14); padding:3px 11px; border-radius:999px; }

.cp-meter{ margin-bottom:18px; }
.cp-meter:last-of-type{ margin-bottom:0; }
.cp-meter-top{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:.82rem; }
.cp-meter-top span:first-child{ color: rgba(247,245,240,.75); }
.cp-val{ font-family: var(--f-mono); color: var(--teal-soft); }
.cp-track{ height:6px; border-radius:999px; background: rgba(247,245,240,.1); overflow:hidden; }
.cp-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--navy-brand), var(--teal)); transition: width 1.5s var(--ease); }

.cp-mini-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:26px; padding-top:22px; border-top:1px dashed var(--ink-line); }
.cp-mini{ text-align:center; }
.cp-mini strong{ display:block; font-family: var(--f-display); font-size:1.28rem; color: var(--paper); }
.cp-mini span{ display:block; font-size:.66rem; color: rgba(247,245,240,.5); margin-top:2px; }

.cp-badge{
  position:absolute; top:-38px; right:-10px; display:flex; align-items:center; gap:10px;
  background: var(--white); border-radius:999px; padding: 9px 18px 9px 9px; box-shadow: var(--shadow-lift);
  border:1px solid var(--rule);
}
.cp-badge .cp-badge-icon{ width:36px; height:36px; border-radius:50%; background: var(--teal-deep); color:#fff; display:grid; place-items:center; font-size:.92rem; flex-shrink:0; }
.cp-badge strong{ display:block; font-family: var(--f-display); font-size:1.02rem; color: var(--ink); line-height:1.1; }
.cp-badge span{ display:block; font-size:.66rem; color: var(--slate-soft); margin-top:2px; }
@media (max-width: 992px){ .cp-badge{ top:-30px; right:8px; } }
@media (max-width: 560px){ .cp-badge{ position:static; margin: -14px auto 18px; width:fit-content; } }

/* ---------- Section 1: Challenges — red-to-teal accent cards ---------- */
.challenge-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:44px; }
@media (max-width: 992px){ .challenge-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .challenge-grid{ grid-template-columns: 1fr; } }
.challenge-card{
  position:relative; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 28px 24px 26px; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.challenge-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #C0392B, var(--navy-brand));
  transform: scaleX(0); transform-origin:left; transition: transform .45s var(--ease);
}
.challenge-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.challenge-card:hover::before{ transform: scaleX(1); }
.challenge-card .icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: rgba(192,57,43,.1); color:#C0392B; font-size:1.1rem; margin-bottom:16px;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.challenge-card:hover .icon{ background: var(--paper-dim); color: var(--teal-deep); transform: rotate(-6deg) scale(1.08); }
.challenge-card h4{ font-size:1rem; margin:0 0 .35em; color: var(--ink); font-weight:600; }
.challenge-card p{ margin:0; font-size:.82rem; color: var(--slate-soft); }

/* ---------- Section 2: Solutions — icon-left list cards ---------- */
.solution-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:44px; }
@media (max-width: 760px){ .solution-grid{ grid-template-columns: 1fr; } }
.solution-card{
  position:relative; display:flex; align-items:center; gap:18px; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 22px 24px; overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.solution-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--navy-brand), var(--teal));
  transform: scaleY(0); transform-origin:top; transition: transform .4s var(--ease);
}
.solution-card:hover{ transform: translateX(6px); box-shadow: var(--shadow-card); border-color: transparent; }
.solution-card:hover::before{ transform: scaleY(1); }
.solution-card .sol-idx{ font-family: var(--f-mono); font-size:.72rem; color: var(--rule); flex-shrink:0; width:22px; }
.solution-card .icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background: var(--paper-dim);
  color: var(--teal); font-size:1.12rem; flex-shrink:0; transition: transform .4s var(--ease), background .3s, color .3s;
}
.solution-card:hover .icon{ background: var(--teal-deep); color:#fff; transform: scale(1.08); }
.solution-card strong{ display:block; font-family: var(--f-display); font-size:1.02rem; color: var(--ink); }
.solution-card span:not(.sol-idx){ display:block; font-size:.8rem; color: var(--slate-soft); margin-top:2px; }

/* ---------- Section 3: Why Choose — ringed bento badges ---------- */
.choose-bento{ display:grid; grid-template-columns: repeat(5,1fr); gap:18px; margin-top:44px; }
@media (max-width: 992px){ .choose-bento{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .choose-bento{ grid-template-columns: repeat(2,1fr); } }
.cb-item{
  background: var(--white); border-radius: var(--radius-lg); padding: 26px 16px; text-align:center;
  box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cb-item:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.cb-ring{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px; position:relative;
  background: conic-gradient(from 180deg, var(--navy-brand), var(--teal), var(--navy-brand));
  padding:3px; display:grid; place-items:center;
}
.cb-ring::after{ content:""; position:absolute; inset:3px; border-radius:50%; background: var(--white); transition: background .35s; }
.cb-ring i{ position:relative; z-index:1; color: var(--teal-deep); font-size:1.2rem; transition: color .35s, transform .35s var(--ease); }
.cb-item:hover .cb-ring i{ transform: scale(1.15); }
.cb-item:hover .cb-ring::after{ background: var(--paper-dim); }
.cb-item h4{ font-size:.9rem; margin:0; color: var(--ink); font-weight:600; }

/* ---------- Section 4: Workflow — arrow-linked vertical flow ---------- */
.flow-steps{ max-width:640px; margin:56px auto 0; display:flex; flex-direction:column; align-items:center; }
.flow-step{
  width:100%; display:flex; align-items:center; gap:20px; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 20px 26px; box-shadow: var(--shadow-card);
  opacity:0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.flow-step.in-view{ opacity:1; transform:none; }
.flow-step:hover{ border-color: var(--teal); box-shadow: var(--shadow-lift); }
.flow-idx{
  font-family: var(--f-mono); font-weight:700; font-size:.92rem; width:46px; height:46px; border-radius:50%;
  background: var(--ink); color: var(--teal); display:grid; place-items:center; flex-shrink:0;
}
.flow-step strong{ display:block; font-family: var(--f-display); font-size:1.02rem; color: var(--ink); }
.flow-step p{ margin:0; font-size:.85rem; color: var(--slate-soft); }
.flow-arrow-down{ color: var(--teal); font-size:1.1rem; padding: 10px 0; animation: flowBounce 1.8s var(--ease) infinite; }
@keyframes flowBounce{ 0%,100%{ transform: translateY(0); opacity:.55; } 50%{ transform: translateY(5px); opacity:1; } }
@media (max-width: 640px){ .flow-step{ padding:16px 18px; gap:14px; } .flow-idx{ width:38px; height:38px; font-size:.78rem; } }

/* ---------- Section 5: Software Expertise — circular tech badges ---------- */
.tech-orbit{ display:grid; grid-template-columns: repeat(6,1fr); gap:18px; margin-top:40px; }
@media (max-width: 860px){ .tech-orbit{ grid-template-columns: repeat(4,1fr); } }
@media (max-width: 560px){ .tech-orbit{ grid-template-columns: repeat(3,1fr); } }
.tech-badge{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding: 20px 10px;
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tech-badge:hover{ transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow-card); }
.tb-circle{
  width:56px; height:56px; border-radius:50%; background: var(--paper-dim); color: var(--teal);
  display:grid; place-items:center; font-size:1.35rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .35s, color .35s;
}
.tech-badge:hover .tb-circle{ transform: scale(1.15); background: var(--teal-deep); color:#fff; box-shadow: 0 0 0 8px rgba(10,154,144,.16); }
.tech-badge span{ font-size:.8rem; font-weight:600; color: var(--ink); text-align:center; }

/* ---------- Section 8: Success Metrics — glass KPI cards ---------- */
.kpi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width: 860px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .kpi-grid{ grid-template-columns: 1fr; } }
.kpi-card{
  position:relative; background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border:1px solid var(--rule); border-radius: var(--radius-lg); padding: 36px 30px; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.kpi-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--navy-brand), var(--teal)); }
.kpi-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: transparent; }
.kpi-card .icon{
  width:54px; height:54px; border-radius:14px; background: var(--paper-dim); color: var(--teal);
  display:grid; place-items:center; font-size:1.3rem; margin-bottom:20px;
  transition: transform .4s var(--ease), background .3s, color .3s; position:relative; z-index:1;
}
.kpi-card:hover .icon{ background: var(--teal-deep); color:#fff; transform: scale(1.08) rotate(-6deg); }
.kpi-card h4{ font-family: var(--f-display); font-size:1.12rem; color: var(--ink); margin:0 0 .3em; position:relative; z-index:1; }
.kpi-card p{ margin:0; font-size:.85rem; color: var(--slate-soft); position:relative; z-index:1; }
.kpi-watermark{ position:absolute; right:-8px; bottom:-16px; font-size:5.5rem; color: var(--rule); opacity:.5; z-index:0; pointer-events:none; }

/* ---------- Sticky consultation bar — centered pill (distinct from the
   left-side pills used by service.css / partnership.css) ---------- */
.sticky-ind-cta{
  position: fixed; left:50%; bottom:26px; transform: translate(-50%, 140px); z-index:1140;
  display:flex; align-items:center; gap:16px; background: var(--ink); color: var(--paper);
  border-radius:999px; padding: 10px 10px 10px 22px; box-shadow: var(--shadow-lift); border:1px solid var(--ink-line);
  transition: transform .5s var(--ease); max-width: calc(100vw - 40px);
}
.sticky-ind-cta.show{ transform: translate(-50%, 0); }
.sticky-ind-cta .sc-icon{ width:36px; height:36px; border-radius:50%; background: var(--teal); color: var(--ink); display:grid; place-items:center; font-size:.95rem; flex-shrink:0; }
.sticky-ind-cta span{ font-size:.85rem; white-space:nowrap; }
@media (max-width: 640px){ .sticky-ind-cta span{ display:none; } .sticky-ind-cta{ padding:10px; gap:8px; } }