:root{
  --sf-surface-2: rgba(255,255,255,.04);
  --sf-surface-3: rgba(255,255,255,.06);
  --sf-border-2: rgba(255,255,255,.09);
  --sf-text-2: rgba(255,255,255,.76);
  --sf-text-3: rgba(255,255,255,.62);
  --sf-gold-soft: rgba(242,214,160,.14);
}
html{scroll-behavior:smooth}
body{ text-rendering: optimizeLegibility; }
img{ max-width:100%; height:auto; }
.sf-progress{position:fixed; inset:0 0 auto; height:3px; z-index:9999; pointer-events:none; background:linear-gradient(90deg, rgba(242,214,160,.95), rgba(255,255,255,.95)); transform-origin:left center; transform:scaleX(0); box-shadow:0 0 18px rgba(242,214,160,.22)}
.ux-band{padding:18px 0 8px}
.ux-band-grid,.proof-metrics,.decision-grid,.compare-grid,.crawl-grid{display:grid; gap:16px}
.ux-band-grid,.proof-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.decision-grid,.crawl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ux-card,.metric-card,.decision-card,.compare-card,.crawl-card{
  position:relative; overflow:hidden; border-radius:24px; padding:22px;
  border:1px solid var(--sf-border-2); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 24px 90px rgba(0,0,0,.34);
}
.ux-card::before,.metric-card::before,.decision-card::before,.compare-card::before,.crawl-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 0% 0%, rgba(242,214,160,.08), transparent 60%);
}
.ux-card > *, .metric-card > *, .decision-card > *, .compare-card > *, .crawl-card > *{position:relative; z-index:1}
.ux-kicker,.metric-label,.compare-kicker{display:inline-flex; align-items:center; gap:8px; width:max-content; padding:7px 11px; border-radius:999px; background:var(--sf-gold-soft); border:1px solid rgba(242,214,160,.16); color:rgba(242,214,160,.96); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.metric-value{font-size:clamp(1.6rem,2.8vw,2.35rem); line-height:1; margin:14px 0 8px; font-weight:950; letter-spacing:-.04em; color:#fff}
.metric-copy,.ux-card p,.decision-card p,.compare-card p,.crawl-card p{color:var(--sf-text-2); line-height:1.65}
.decision-card h3,.compare-card h3,.crawl-card h3,.ux-card h3{margin:12px 0 10px; font-size:1.18rem; letter-spacing:-.02em}
.decision-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.compare-list,.crawl-list{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.compare-list li,.crawl-list li{display:grid; grid-template-columns:16px 1fr; gap:10px; color:var(--sf-text-2); align-items:start}
.compare-list li::before,.crawl-list li::before{content:"•"; color:rgba(242,214,160,.96); font-weight:900}
.sf-section-head{max-width:860px; margin:0 auto 26px; text-align:center}
.sf-section-head p{color:var(--sf-text-2)}
.hero-proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; max-width:760px}
.hero-proof .proof-pill{padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.86); font-size:.94rem; box-shadow:0 12px 34px rgba(0,0,0,.28)}
.hero-proof strong{display:block; color:#fff; font-size:1rem}
.section-divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent); margin:10px 0 0}
.cta-duo{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.page-anchor-nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.page-anchor-nav a{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:10px 14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#fff; text-decoration:none}
.page-anchor-nav a:hover{border-color:rgba(242,214,160,.26); box-shadow:0 18px 44px rgba(0,0,0,.28)}
.seo-note{margin-top:16px; padding:16px 18px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--sf-text-2)}
.footer-mini-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.footer-mini-links a{color:rgba(255,255,255,.7)}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (max-width:980px){
  .ux-band-grid,.proof-metrics,.decision-grid,.compare-grid,.crawl-grid,.hero-proof{grid-template-columns:1fr}
}