/* Envisor v7 — Pano AI audit: split hero, teal/orange on cream, pure sans, trust-grid emphasis */
:root {
  --bg: #fbf6ee;
  --ink: #242220;
  --muted: #6b665e;
  --muted-2: #8f897e;
  --border: #e7e0d2;
  --card: #ffffff;
  --teal: #0e9c96;
  --teal-dark: #0a726d;
  --teal-tint: #e2f4f2;
  --orange: #e8833d;
  --orange-tint: #fbe9db;
  --max: 1240px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-tight: 64px;
  --space-lg: 120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0; color: var(--muted); line-height: 1.6; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14,156,150,0.28); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 15px; }
.btn-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); }
.btn-text svg { transition: transform 0.15s ease; }
.btn-text:hover svg { transform: translateX(3px); }
.nav-login { font-size: 14px; font-weight: 600; color: var(--muted); margin-right: 8px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(251,246,238,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.nav.is-scrolled { border-color: var(--border); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 36px; }
.nav-logo img { height: 22px; }
.nav-links { list-style: none; display: flex; gap: 28px; margin: 0 auto 0 0; padding: 0; }
.nav-item { position: relative; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 0; }
.nav-item > span { display: inline-flex; align-items: center; gap: 5px; }
.nav-item a:not(.card-link) { font-size: 14px; font-weight: 600; }
.nav-dropdown { position: absolute; top: 100%; left: -16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; min-width: 260px; box-shadow: 0 20px 40px rgba(36,34,32,0.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.15s ease; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 10px; }
.nav-dropdown a:hover { background: var(--teal-tint); }
.dd-title { font-size: 14px; font-weight: 700; }
.dd-desc { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.nav-actions { display: flex; align-items: center; }
.nav-mobile-toggle { display: none; }
.mobile-nav { display: none; }

/* ---------- Hero (split, Pano AI's real composition) ---------- */
.hero { padding: 64px 32px 100px; }
.hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.03; margin: 0 0 22px; }
.hero-sub { font-size: 18px; line-height: 1.6; max-width: 46ch; margin-bottom: 32px; color: var(--muted); }
.hero-cta-row { display: flex; align-items: center; gap: 26px; }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 60px rgba(36,34,32,0.10); }
.hero-media img { width: 100%; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* ---------- Signals (Pano AI audit v2) ----------
   Pano AI's core register is real-time detection/alert awareness — not
   represented anywhere on this page yet, which had settled into a fairly
   generic feature-card/workflow/testimonial rhythm. This section borrows
   that "live signal" identity using real strings already shipped in
   Envisor's own product screenshots (the alert banner, review-queue count,
   and project-health status visible in hero-dashboard-framed.png) rather
   than inventing new claims — just surfaced as their own moment instead of
   buried inside a screenshot. */
.signals { padding: var(--space-tight) 32px; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.signals-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.signals-lead h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 14px 0 12px; line-height: 1.12; }
.signals-lead p { font-size: 15.5px; line-height: 1.55; max-width: 36ch; }
.signals-grid { display: flex; flex-direction: column; gap: 14px; }
.signal-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); }
.signal-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; }
.signal-card--orange .signal-icon { background: var(--orange-tint); color: var(--orange); }
.signal-card--teal .signal-icon { background: var(--teal-tint); color: var(--teal-dark); }
.signal-card--ink .signal-icon { background: var(--border); color: var(--ink); }
.signal-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.signal-text { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.signal-meta { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .signals-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Feature cards ---------- */
.feature-cards { padding: var(--space-tight) 32px; max-width: var(--max); margin: 0 auto; }
.sec-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.feature-card img { border-radius: 12px; height: 160px; width: 100%; object-fit: cover; object-position: top; margin-bottom: 20px; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { font-size: 14.5px; margin-bottom: 16px; }
.card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--teal-dark); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Workflow ---------- */
.workflow { padding: var(--space-tight) 32px; max-width: var(--max); margin: 0 auto; }
.workflow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.workflow-steps li { border-top: 3px solid var(--orange); padding-top: 20px; }
.workflow-num { font-size: 13px; font-weight: 800; color: var(--orange); }
.workflow-steps h4 { font-size: 17px; margin: 10px 0 8px; }
.workflow-steps p { font-size: 14px; }
@media (max-width: 900px) { .workflow-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .workflow-steps { grid-template-columns: 1fr; } }

/* ---------- Audience split (Pano AI audit v2, section 2) ----------
   Pano AI's real nav segments its audience explicitly (Industries: Utilities,
   Fire Professionals, Landowners) and content follows that split. This page's
   nav already has a "Who It's For" dropdown (Consultants / Public Agencies)
   and the trust section below already splits logos into those two tiers —
   but nothing on the page ever explains what's actually different about
   each audience's experience before that logo split shows up. Two real
   product screenshots that weren't used anywhere else on this page
   (cara-review-queue.png, mira-site-intelligence.png) anchor each side, with
   copy reused verbatim from the same Consultants/Agencies split already
   established elsewhere in this project's content bank (v4/v9's bento
   grid) — not new claims, just given a section here instead of an unused
   dropdown link. */
.audience { padding: var(--space-tight) 32px; max-width: var(--max); margin: 0 auto; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.audience-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.audience-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(36,34,32,0.08); }
.audience-media { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--border); }
.audience-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.audience-body { padding: 28px 26px 30px; }
.audience-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--orange-tint); color: var(--orange); margin-bottom: 16px; }
.audience-card:nth-child(2) .audience-icon { background: var(--teal-tint); color: var(--teal-dark); }
.audience-body h3 { font-size: 21px; margin-bottom: 10px; }
.audience-body p { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; } }

/* ---------- Trust (tiered logo grid) ---------- */
.trust { padding: var(--space-tight) 32px; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-inner { max-width: var(--max); margin: 0 auto; }
.trust-label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 40px; }
.trust-tier + .trust-tier { margin-top: 36px; }
.trust-tier-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.trust-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; align-items: center; }
.trust-grid-sm { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.logo-cell { display: flex; align-items: center; justify-content: center; }
.logo-cell img { max-height: 32px; width: auto; opacity: 0.75; filter: grayscale(1); transition: opacity 0.15s ease, filter 0.15s ease; }
.logo-cell img.logo-lg { max-height: 42px; }
.logo-cell img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Impact ---------- */
.impact { padding: var(--space-tight) 32px; }
.impact-inner { max-width: var(--max); margin: 0 auto; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.impact-stat { background: var(--teal-tint); border-radius: var(--radius-lg); padding: 28px; }
.impact-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 10px; }
.impact-num { display: block; font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.impact-desc { font-size: 14px; }
@media (max-width: 900px) { .impact-grid { grid-template-columns: 1fr; } }

/* ---------- Testimonial feature (branded shape behind quote) ---------- */
.testimonial-feature-section { position: relative; padding: 100px 32px; overflow: hidden; text-align: center; }
.tf-shape { position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); border-radius: 0 0 60px 60px; z-index: 0; }
.tf-quote { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.tf-quote p { font-size: clamp(24px, 3vw, 34px); color: #fff; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 24px; }
.tf-quote cite { display: flex; flex-direction: column; gap: 4px; font-style: normal; }
.tf-org { font-weight: 700; color: #fff; font-size: 15px; }
.tf-role { color: rgba(255,255,255,0.75); font-size: 13px; }

.testimonials-support { padding: 56px 32px; }
.ts-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.testimonials-support blockquote { margin: 0; }
.testimonials-support p { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.testimonials-support cite { font-style: normal; display: flex; gap: 8px; font-size: 13px; }
.testimonials-support .t-org { font-weight: 700; }
.testimonials-support .t-role { color: var(--muted); }
@media (max-width: 760px) { .ts-inner { grid-template-columns: 1fr; } }

/* ---------- Final CTA ---------- */
.final-cta { padding: var(--space-tight) 32px; text-align: center; background: var(--orange-tint); }
.final-cta h2 { font-size: clamp(26px, 3.4vw, 40px); max-width: 20ch; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.footer { padding: 56px 32px 32px; background: var(--ink); color: var(--bg); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.footer-logo { height: 20px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(251,246,238,0.25); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(251,246,238,0.45); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; padding: 5px 0; color: var(--bg); }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { max-width: var(--max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(251,246,238,0.15); font-size: 12.5px; color: rgba(251,246,238,0.45); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }