:root{
  --blue:#0B5ED7;
  --orange:#FF8A00;
  --dark:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#f8fafc;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--dark);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.brand img{height:36px;width:auto}
.links{display:flex;gap:16px;align-items:center}
.links a{padding:8px 10px;border-radius:10px;color:var(--muted);font-weight:600}
.links a:hover{background:var(--card);color:var(--dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(.96)}
.btn-outline:hover{background:var(--card)}
.hero{padding:34px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.h1{font-size:44px;line-height:1.05;margin:0 0 10px}
.sub{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 18px}
.search-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.input{flex:1;min-width:240px;border:1px solid var(--border);border-radius:14px;padding:14px 14px;font-size:15px}
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.kpi{flex:1;min-width:160px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}
.kpi .label{color:var(--muted);font-weight:700;font-size:12px}
.kpi .val{font-size:20px;font-weight:800;margin-top:6px}
.section{padding:18px 0 40px}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted);font-size:13px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 12px;color:var(--muted);font-weight:700;font-size:12px}
.small{font-size:12px;color:var(--muted)}
hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.price{font-size:34px;font-weight:900}
ul{margin:10px 0 0 18px;color:var(--muted);line-height:1.6}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .h1{font-size:36px}
}
/* =========================================
   HERO BACKGROUND SECTION (HOME PAGE ONLY)
========================================= */

.hero.hero-bg{
  position: relative;
  padding: 110px 0 90px;
  background: url("../images/hero.jpg") center center / cover no-repeat;
  color: #fff;
}

/* dark overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background: rgba(17, 24, 39, 0.55);
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:900px;
}

.hero-title{
  font-size:48px;
  font-weight:900;
  margin:0 0 16px;
  line-height:1.1;
}

.hero-subtitle{
  font-size:18px;
  opacity:.95;
  max-width:720px;
  margin-bottom:28px;
}

/* Search card */
.hero-search-card{
  background: rgba(255,255,255,0.95);
  border-radius:22px;
  padding:24px;
  color:var(--dark);
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  max-width:780px;
}

/* form layout */
.hero-form{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-input{
  flex:1;
  min-width:240px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  font-size:16px;
}

.hero-btn{
  background:var(--blue);
  border:none;
  border-radius:14px;
  padding:16px 22px;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.hero-btn:hover{
  filter:brightness(.95);
}

.hero-note{
  margin-top:14px;
  font-size:14px;
  color:var(--muted);
}

/* mini cards */
.hero-mini-cards{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:20px;
}

.mini-card{
  flex:1;
  min-width:150px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.mini-kicker{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.mini-title{
  font-size:18px;
  font-weight:900;
  margin-top:6px;
}

/* mobile */
@media(max-width:900px){
  .hero-title{font-size:36px}
  .hero{padding:80px 0 60px}
}
.hero-title {
  font-size: 64px;      /* Adjust if needed */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
}

.hero-subtitle {
  font-size: 28px;      /* Smaller than main title */
  font-weight: 500;
  color: #F97316;       /* Modern startup orange */
}
.hero-subtitle1 {
  font-size: 22px;      /* Smaller than main title */
  font-weight: 500;
  color: #ffffff;       /* Modern startup white */
}
.pricing-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.pricing-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-right{
  align-self: start;
}

/* Mobile */
@media (max-width: 900px){
  .pricing-layout{
    grid-template-columns: 1fr;
  }
}
.pricing-right { position: sticky; top: 90px; }

.plan-title{
  font-weight: 900;
  color: #1f2937;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.price{
  font-size: 30px;
  font-weight: 800;
  color: #1f2937;
}
.chart-wrap{
  width: 100%;
  height: 320px; /* desktop + tablet */
}

@media (max-width: 600px){
  .chart-wrap{
    height: 260px; /* portrait phones */
  }
}

.chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.chart-wrap{
  width: 100%;
  height: 320px;
}

@media (max-width: 600px){
  .chart-wrap{
    height: 260px;
  }
}

.chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}