/* site/audit-sections.css — Purpose: section layouts for audit page (hero, findings, compare, cta) */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem clamp(1.2rem,4vw,3rem);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(18,18,18,.86);backdrop-filter:blur(8px);z-index:20;
}
.topbar .mono{font-size:.62rem}

.hero{
  min-height:min(92vh,54rem);display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:var(--sp) 1.4rem 3rem;position:relative;
  background:
    radial-gradient(60% 45% at 50% 0%,rgba(74,108,247,.14),transparent 70%),
    radial-gradient(40% 30% at 80% 90%,rgba(0,212,255,.06),transparent 70%);
}
.hero h1{font-size:clamp(2.5rem,1.6rem + 5.4vw,5.4rem);line-height:1.06;max-width:14ch}
.score-wrap{margin-top:3.2rem}
.score{
  font-family:var(--serif);font-size:clamp(5.5rem,4rem + 11vw,11rem);line-height:1;
  color:var(--fail);font-variant-numeric:tabular-nums;
  text-shadow:0 0 70px rgba(255,92,92,.25);
}
.score small{font-size:.32em;color:var(--dim)}
.score-label{margin-top:.6rem;color:var(--dim)}
.score-note{margin-top:1rem;color:var(--txt);max-width:34ch}
.score-note b{color:var(--cyan)}
.scroll-hint{position:absolute;bottom:1.6rem;font-size:.62rem}

.findings,.compare{max-width:var(--max);margin:0 auto;padding:var(--sp) clamp(1.2rem,4vw,3rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem}
.card{
  background:var(--panel);border:1px solid var(--line);padding:1.7rem 1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.55rem;position:relative;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--blue);transform:translateY(-3px)}
.card.wide{grid-column:1/-1;border-color:rgba(255,92,92,.5);background:linear-gradient(120deg,#241a1a,var(--panel) 55%)}
.card h3{font-size:1.02rem;font-weight:600}
.card p{color:#bdbbb5;font-size:.93rem}
.big{
  font-family:var(--serif);font-size:clamp(2.6rem,2rem + 2.4vw,3.8rem);line-height:1;
  color:var(--cyan);font-variant-numeric:tabular-nums;
}
.card.wide .big,.glitch{color:var(--fail)}
.glitch{text-decoration:line-through;text-decoration-color:rgba(255,92,92,.55);text-decoration-thickness:3px}

.bars{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.2rem}
.bar-row{display:grid;grid-template-columns:minmax(110px,160px) 1fr;align-items:center;gap:1rem}
.bar-row>span{font-size:.85rem;color:var(--dim)}
.bar{height:2.2rem;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,#2b3550,var(--blue));transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.in .bar::before{transform:scaleX(1)}
.bar.you::before{background:linear-gradient(90deg,#4d2020,var(--fail))}
.bar i{position:absolute;left:calc(var(--w) + .6rem);top:50%;translate:0 -50%;font-style:normal;font-family:var(--mono);font-size:.8rem}
.callout{
  border:1px solid var(--cyan);padding:1.8rem 2rem;margin:2.4rem 0;
  font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);line-height:1.4;
  background:linear-gradient(110deg,rgba(0,212,255,.07),transparent 60%);
}
.feat{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:1.4rem}
.feat th,.feat td{padding:.85rem .9rem;border-bottom:1px solid var(--line);text-align:center}
.feat td:first-child,.feat th:first-child{text-align:left}
.feat thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.you-col{background:rgba(255,92,92,.08);color:var(--fail);font-weight:600}
.feat tbody tr:hover{background:#1d1d1d}
.note{margin-top:1.6rem;color:var(--dim);font-size:.92rem}
.note b{color:var(--txt)}

.cta{
  text-align:center;padding:var(--sp) 1.4rem;border-top:1px solid var(--line);
  background:radial-gradient(50% 60% at 50% 100%,rgba(0,212,255,.09),transparent 75%);
}
.cta h2{font-size:clamp(2rem,1.5rem + 3vw,3.6rem);max-width:20ch;margin:0 auto 1.2rem}
.cta p{max-width:52ch;margin:0 auto 2.4rem;color:#bdbbb5}

.foot{display:flex;justify-content:center;padding:2.2rem 1.4rem;border-top:1px solid var(--line);font-size:.62rem;text-align:center}
.brand-foot{color:var(--cyan)}

@media (max-width:640px){
  .hero{min-height:min(88vh,46rem)}
  .bar-row{grid-template-columns:1fr;gap:.3rem}
  .bar i{left:auto;right:.6rem;color:#fff}
  .feat{font-size:.78rem}
  .feat th,.feat td{padding:.6rem .4rem}
}