/* =========================================
   GeoDetectit Pro page styles
   Extends site.css
========================================= */

/* Hero glow used only on Pro hero */

:root{
  --hero-glow:
    radial-gradient(circle at 20% 20%, rgba(20,182,125,.18), transparent 26%),
    radial-gradient(circle at 80% 30%, rgba(96,183,255,.10), transparent 22%),
    radial-gradient(circle at 45% 75%, rgba(255,184,77,.08), transparent 20%);
}


/* Small badge sometimes used near brand or titles */

.brand-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--ink);
  font-weight:600;
}


/* Pro hero layout */

.hero-main{
  background:
    linear-gradient(180deg, rgba(12,15,16,.94), rgba(12,15,16,.98)),
    var(--hero-glow);
}

.hero-side{
  display:grid;
  gap:16px;
}


/* Ghost button variant (transparent) */

.btn.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}


/* Cards used in feature / value sections */

.value-card,
.story-card{
  height:100%;
}

.value-card p,
.story-card p{
  margin-bottom:0;
}


/* Pricing box styling */

.pricebox{
  padding:18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(
    180deg,
    rgba(20,182,125,.08),
    rgba(20,182,125,.03)
  );
}

.price-main{
  font-size:34px;
  line-height:1.1;
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
  letter-spacing:-0.02em;
}

.price-sub{
  color:var(--muted);
  font-size:14px;
  margin-bottom:10px;
}

.price-note{
  color:#c8f6e4;
  font-size:13px;
  line-height:1.55;
}


/* Small KPI badges near price */

.mini-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}


/* Comparison table */

.compare{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}

.compare th,
.compare td{
  border-bottom:1px solid var(--line);
  padding:12px 10px;
  text-align:left;
  vertical-align:top;
}

.compare th{
  color:#d9fff1;
  font-size:14px;
}

.compare td:nth-child(2),
.compare th:nth-child(2),
.compare td:nth-child(3),
.compare th:nth-child(3){
  text-align:center;
  width:110px;
}

.ok{
  color:#9ef0c7;
  font-weight:800;
}

.no{
  color:#88979d;
  font-weight:700;
}


/* Responsive adjustments */

@media (max-width:960px){

  .hero-side{
    gap:12px;
  }

  .price-main{
    font-size:30px;
  }

}