/* ========================================
   SiteScout — Global Styles
   ======================================== */

:root {
  --bg:        #0A0E0D;
  --surface:   #0F1A14;
  --surface2:  #152319;
  --amber:     #F59E0B;
  --amber-dim: rgba(245, 158, 11, 0.12);
  --green:     #14532D;
  --green-mid: #166534;
  --text:      #E8ECD8;
  --text-dim:  rgba(232, 236, 216, 0.55);
  --text-mid:  rgba(232, 236, 216, 0.75);
  --border:    rgba(245, 158, 11, 0.15);
  --border-mid: rgba(245, 158, 11, 0.3);
  --green-glow: rgba(20, 83, 45, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ========================================
   HERO
   ======================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 4rem 6rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero-trees {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.hero-trees-far {
  height: 45%;
  background: linear-gradient(180deg, transparent 60%, rgba(20,83,45,0.2) 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400'%3E%3Cpath fill='%23000' d='M0 400 L60 200 L90 260 L150 120 L190 220 L230 160 L280 250 L320 180 L370 280 L410 190 L460 260 L520 140 L570 240 L620 180 L670 270 L720 200 L770 290 L810 210 L860 260 L900 170 L950 240 L990 200 L1040 280 L1080 190 L1130 260 L1170 220 L1220 300 L1270 210 L1320 270 L1380 180 L1440 250 L1440 400Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-position: bottom;
}

.hero-trees-mid {
  height: 30%;
  background: linear-gradient(180deg, transparent 50%, rgba(10,14,13,0.7) 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300'%3E%3Cpath fill='%23000' d='M0 300 L40 140 L80 200 L130 80 L165 170 L200 120 L245 190 L285 130 L330 200 L370 140 L415 210 L460 160 L510 220 L555 150 L600 200 L645 170 L690 230 L740 160 L785 220 L830 180 L875 240 L920 190 L965 250 L1010 200 L1060 260 L1105 190 L1150 250 L1195 210 L1240 270 L1285 200 L1330 260 L1380 190 L1440 240 L1440 300Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-position: bottom;
}

.hero-trees-near {
  height: 18%;
  background: #0A0E0D;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23000' d='M0 200 L30 90 L70 150 L110 60 L150 130 L185 85 L225 140 L265 90 L305 150 L345 100 L385 155 L425 110 L470 160 L510 95 L550 145 L590 105 L630 155 L670 115 L715 160 L755 105 L800 150 L840 100 L885 155 L925 110 L970 160 L1010 105 L1055 150 L1095 95 L1140 145 L1180 110 L1225 155 L1265 100 L1310 150 L1350 105 L1390 155 L1440 120 L1440 200Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-position: bottom;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  right: -100px;
  top: -100px;
  background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  left: -80px;
  bottom: 100px;
  background: radial-gradient(circle, rgba(20,83,45,0.3) 0%, transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2rem;
  padding: 6px 14px;
  border: 1px solid var(--border-mid);
  border-radius: 100px;
  background: var(--amber-dim);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 2rem;
}

.hero-headline br { display: block; }

.hero-sub {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 600px;
  margin-bottom: 3.5rem;
  font-weight: 400;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.stat { display: flex; flex-direction: column; gap: 4px; }

.stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 400;
  max-width: 100px;
  line-height: 1.4;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
}

/* ========================================
   MANIFESTO
   ======================================== */

.manifesto {
  padding: 7rem 4rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.manifesto-inner { max-width: 1100px; margin: 0 auto; }

.manifesto-label, .section-label {
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2.5rem;
  display: block;
}

.manifesto-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.manifesto-text-large {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.manifesto-col-right .manifesto-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
}

/* ========================================
   HOW IT WORKS
   ======================================== */

.how-it-works {
  padding: 7rem 4rem;
}

.how-header { max-width: 1100px; margin: 0 auto 4rem; }

.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-top: 0.75rem;
}

.steps {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.step {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}

.step-number {
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  display: block;
}

.step-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.step-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--amber-dim);
  border: 1px solid var(--border);
  color: var(--amber);
}

.step-connector {
  display: flex;
  align-items: center;
  padding-top: 4rem;
  width: 60px;
  flex-shrink: 0;
}

.connector-line {
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

.connector-arrow {
  color: var(--amber);
  opacity: 0.6;
}

/* ========================================
   SCORECARD
   ======================================== */

.scorecard-section {
  padding: 7rem 4rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.scorecard-inner { max-width: 1100px; margin: 0 auto; }

.scorecard-header { max-width: 600px; margin-bottom: 3.5rem; }

.scorecard-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin-top: 1rem;
}

.deal-card {
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 720px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.card-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.3);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}

.card-property-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.card-location {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.card-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.score-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.ring-svg { position: absolute; inset: 0; }

.ring-bg {
  fill: none;
  stroke: rgba(245,158,11,0.12);
  stroke-width: 4;
}

.ring-fill {
  fill: none;
  stroke: #F59E0B;
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s ease;
}

.score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--amber);
}

.score-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-metrics {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 8px;
}

.metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 1rem;
  border-right: 1px solid var(--border);
}

.metric:last-child { border-right: none; }
.metric:first-child { padding-left: 0; }

.metric-val {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.metric-key {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card-signals {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(245,158,11,0.06);
  gap: 1rem;
}

.signal-row:last-child { border-bottom: none; }

.signal-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.signal-val {
  font-size: 0.8rem;
  font-weight: 500;
}

.signal-high { color: #22c55e; }
.signal-mid  { color: var(--text-mid); }
.signal-low  { color: #ef4444; }

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.card-watch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.watch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s ease-in-out infinite;
}

.card-actions {
  display: flex;
  gap: 1.5rem;
}

.card-action {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--amber);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}

.card-action:hover {
  text-decoration-color: var(--amber);
}

.scorecard-note {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 1.5rem;
  line-height: 1.55;
}

/* ========================================
   CRITERIA
   ======================================== */

.criteria-section {
  padding: 7rem 4rem;
}

.criteria-inner { max-width: 1100px; margin: 0 auto; }

.criteria-header { margin-bottom: 3.5rem; }

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.criteria-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}

.criteria-icon {
  color: var(--amber);
  margin-bottom: 1.25rem;
}

.criteria-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}

.criteria-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.criteria-list li {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.45;
  padding-left: 1rem;
  position: relative;
}

.criteria-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
}

/* ========================================
   CLOSING
   ======================================== */

.closing-section {
  padding: 7rem 4rem 9rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.closing-inner { max-width: 800px; margin: 0 auto; text-align: center; }

.closing-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--border-mid);
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--amber-dim);
  margin-bottom: 2.5rem;
}

.closing-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
}

.closing-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 3rem;
}

.closing-vision {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}

.vision-text {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--amber);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  padding: 3rem 4rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.footer-logo-text {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.footer-tagline {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.footer-meta { text-align: right; }

.footer-copy {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.footer-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero, .manifesto, .how-it-works, .scorecard-section,
  .criteria-section, .closing-section, .site-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero { padding-top: 6rem; }

  .manifesto-body { grid-template-columns: 1fr; gap: 2rem; }

  .steps {
    flex-direction: column;
    gap: 1rem;
  }

  .step-connector {
    display: none;
  }

  .criteria-grid { grid-template-columns: 1fr; }

  .hero-stats { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .stat-divider { display: none; }

  .card-header { flex-direction: column; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }

  .card-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 480px) {
  .card-metrics {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .metric {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
  }
  .metric:last-child { border-bottom: none; }
}