/* PublicWeave shared styles — load on every page */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; overflow-x: hidden; background: #F4F6FB; color: #1B2B6B; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(29,158,117,0.2); }
a { color: inherit; text-decoration: none; }
input:focus, button:focus { outline: none; }
img { max-width: 100%; height: auto; }

@keyframes pw-float { 0%,100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } }
@keyframes pw-glow { 0%,100% { opacity:1; filter:brightness(1); } 50% { opacity:0.85; filter:brightness(1.15); } }
@keyframes pw-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes pw-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes pw-scroll-hint { 0%,100% { transform: translateY(0); opacity:0.4; } 50% { transform: translateY(10px); opacity:0.15; } }

.reveal { opacity: 0; transform: translateY(36px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; padding: 28px; box-shadow: 0 8px 32px rgba(27,43,107,0.06); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.glass.glow { box-shadow: 0 0 40px rgba(29,158,117,0.15), 0 8px 32px rgba(27,43,107,0.08); }
.glass.dark { background: rgba(15,27,77,0.55); border: 1px solid rgba(255,255,255,0.08); }
.glass:hover { transform: translateY(-2px); }

.cta-btn { padding: 16px 44px; border-radius: 14px; border: none; background: linear-gradient(135deg, #1D9E75, #16A34A); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 24px rgba(29,158,117,0.3); transition: all 0.3s; display: inline-block; text-decoration: none; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(29,158,117,0.4); }
.cta-btn.lg { padding: 18px 52px; font-size: 17px; box-shadow: 0 4px 32px rgba(29,158,117,0.35); }
.cta-btn.ghost { background: transparent; border: 1px solid rgba(29,158,117,0.4); color: #1D9E75; box-shadow: none; }
.cta-btn.ghost:hover { background: rgba(29,158,117,0.08); border-color: #1D9E75; }

.inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; }
.inner.narrow { max-width: 960px; }

.sec-num { font-size: clamp(88px,14vw,172px); font-weight: 100; line-height: 0.9; letter-spacing: -6px; color: rgba(27,43,107,0.08); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.sec-num.light { color: rgba(255,255,255,0.07); }
.sec-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #1D9E75; margin-bottom: 10px; }
.sec-h { font-size: clamp(34px,4.8vw,56px); font-weight: 200; line-height: 1.08; letter-spacing: -0.8px; color: #1B2B6B; }
.sec-h.light { color: #fff; }
.sec-sub { font-size: 16px; color: #8892B0; line-height: 1.7; margin-top: 16px; max-width: 620px; }
.sec-sub.light { color: rgba(255,255,255,0.45); }

/* Top nav — dark glass, matches landing page + sub-hero gradient */
.topnav { position: sticky; top: 0; z-index: 100; padding: 18px 48px; display: flex; justify-content: space-between; align-items: center; background: rgba(15,27,77,0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.topnav a.nav-link { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; transition: color 0.2s; }
.topnav a.nav-link:hover { color: #1D9E75; }
.topnav .brand img { filter: brightness(1.1); }

/* Breadcrumb */
.crumb { font-size: 12px; color: #8892B0; letter-spacing: .03em; padding: 20px 0 8px; }
.crumb a { color: #8892B0; transition: color 0.2s; }
.crumb a:hover { color: #1D9E75; }
.crumb .sep { margin: 0 8px; color: rgba(136,146,176,0.5); }

/* Hero on sub-pages */
.sub-hero { background: linear-gradient(135deg,#0F1B4D 0%,#1B2B6B 50%,#1B4D40 100%); color: #fff; padding: 80px 0 100px; position: relative; overflow: hidden; }
.sub-hero::before { content:''; position:absolute; inset:0; background-image: url(/images/dashboard_grid_dissolve.png); background-size: 800px; background-repeat: repeat; opacity: 0.04; pointer-events: none; }
.sub-hero-inner { position: relative; z-index: 2; }
.sub-hero h1 { font-size: clamp(40px,5.5vw,68px); font-weight: 200; line-height: 1.08; letter-spacing: -1.2px; margin-bottom: 18px; }
.sub-hero p.lede { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 640px; font-weight: 300; }
.sub-hero .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #1D9E75; font-weight: 600; margin-bottom: 14px; }

/* Agency-type illustration block */
.agency-illo { width: 100%; max-width: 560px; margin: 0 auto 28px; display: block; }

/* KPI list on sub-pages */
.kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 28px 0; }
.kpi-card { padding: 22px 20px; border-radius: 14px; background: rgba(255,255,255,0.92); border: 1px solid rgba(216,221,240,0.35); border-top: 3px solid #1D9E75; transition: all 0.3s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(27,43,107,0.08); }
.kpi-card .label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8892B0; font-weight: 600; margin-bottom: 8px; }
.kpi-card .val { font-size: 22px; font-weight: 600; color: #1B2B6B; letter-spacing: -0.3px; line-height: 1.1; margin-bottom: 6px; }
.kpi-card .desc { font-size: 12px; color: #4A5580; line-height: 1.6; }

/* Feature list on sub-pages */
.feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.feat { padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid rgba(216,221,240,0.4); }
.feat h3 { font-size: 16px; color: #1B2B6B; font-weight: 600; margin-bottom: 6px; }
.feat p { font-size: 13px; color: #4A5580; line-height: 1.65; }

/* Footer */
.site-footer { background:#0F1B4D; color:rgba(255,255,255,0.6); padding:64px 0 28px; position:relative; overflow:hidden; }
.site-footer::before { content:''; position:absolute; inset:0; background-image:url(/images/dashboard_bg_texture.png); background-repeat:repeat; background-size:512px; opacity:0.02; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; position: relative; z-index: 1; }
.footer-col h4 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 600; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.6); padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: #1D9E75; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-bottom a { color: rgba(29,158,117,0.6); }

@media (max-width: 900px) {
  .topnav { padding: 14px 20px; }
  /* !important so page-level inline grid styles (e.g. repeat(4,1fr) on .kpi-row) don't win */
  .kpi-row { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .sec-num { font-size: 64px !important; letter-spacing: -3px !important; }
  /* Subpage sub-hero inline style is `grid 1.1fr 0.9fr`; force single column */
  .sub-hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; }
  .sub-hero-inner .agency-illo { max-width: 360px; margin: 0 auto; }
  .sub-hero h1 { font-size: clamp(32px, 6vw, 52px) !important; }
}
@media (max-width: 640px) {
  .topnav { padding: 12px 16px; }
  .topnav a.nav-link:not(.brand) { display: none; }
  .topnav .cta-btn { padding: 8px 14px !important; font-size: 12px !important; }
  .inner { padding: 0 20px; }
  .sub-hero { padding: 48px 0 56px; }
  .sub-hero h1 { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -0.6px !important; }
  .sub-hero p.lede { font-size: 15px !important; }
  .sec-num { font-size: 48px !important; letter-spacing: -2px !important; }
  .kpi-row { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cta-btn, .cta-btn.lg { padding: 14px 28px !important; font-size: 15px !important; width: 100%; text-align: center; }
  .cta-btn.ghost { padding: 14px 28px !important; }
}