/* ============== Base ============== */
:root{
  --brand:#F47721;
  --ink:#0e1a2b;
  --muted:#5a6b7b;
  --bg:#ffffff;
  --card:#f7f9fb;
  --stroke:#e5edf4;
  --shadow:0 8px 24px rgba(14,26,43,.06);
}
*{box-sizing:border-box}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;border-radius:10px;padding:12px 18px;background:var(--brand);color:#fff;font-weight:600;border:2px solid var(--brand);box-shadow:var(--shadow);transition:.2s}
.btn:hover{filter:brightness(.95);text-decoration:none}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--stroke)}
small{color:var(--muted)}
a{text-decoration:none}

/* ============== HERO ============== */
.hero{
  background:
    radial-gradient(1200px 450px at 10% 0%, #fff2e8 0%, rgba(255,255,255,0) 60%),
    #fff;
  padding:72px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:48px;
}
.hero h1{
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 16px;
}
.hero p{color:var(--muted);font-size:16px;max-width:52ch;margin:0 0 20px}
.cta-row{display:flex;gap:12px;margin-bottom:16px}

.kpis{display:flex;gap:12px}
.kpi{background:#fff;border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);min-width:120px}
.kpi .n{font-weight:800;color:var(--ink);font-size:18px}
.kpi .l{color:var(--muted);font-size:12px}

/* decorative mini “map” */
.mock{width:100%;display:flex;justify-content:flex-end}
.map-skel{
  width:min(520px,100%);
  height:220px;border:1px solid var(--stroke);border-radius:16px;
  background:
    linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  position:relative;
  box-shadow:var(--shadow);
}
.map-skel:before{
  content:"";
  position:absolute;inset:12px;
  background:
    linear-gradient(#e9eef4 0 0) left/1px 100%,
    linear-gradient(90deg,#e9eef4 0 0) top/100% 1px;
  background-repeat:repeat;
  background-size:24px 100%, 100% 24px;
  opacity:.7;border-radius:12px;
}
.pin,.pin2{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:#0bbef2;left:24%;top:34%;
  box-shadow:0 0 0 6px rgba(11,190,242,.35), 0 0 0 12px rgba(11,190,242,.15);
}
.pin2{left:58%;top:55%}

/* ============== CTA STRIP ============== */
.cta-strip{padding:24px 0 40px}
.cta-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px,1fr));
  gap:18px;
}
.ctabox{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:#fff;border:1px solid var(--stroke);border-radius:14px;
  min-height:92px;box-shadow:var(--shadow);font-weight:800;color:var(--ink);
  transition:.2s;text-align:center
}
.ctabox:hover{transform:translateY(-2px)}
.ctabox.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ============== Add-ons (optional sections below) ============== */
.value-strip{padding:18px 0 10px;border-top:1px solid var(--stroke)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.value-card{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.value-card h3{margin:0 0 6px;font-size:16px}
.value-card p{margin:0;color:var(--muted);font-size:14px}

.how{padding:28px 0 4px}
.how h2{margin:0 0 16px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.step b{display:block;margin-bottom:6px}

/* ============== Responsive ============== */
@media (max-width:1024px){
  .hero h1{font-size:44px}
  .hero-grid{grid-template-columns:1fr}
  .mock{justify-content:flex-start}
  .cta-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hero{padding:48px 0 8px}
  .hero h1{font-size:34px}
  .cta-grid{grid-template-columns:1fr}
}