:root{
  --bg:#F7F8FA;
  --bgSoft:#F1F5F9;
  --surface:#FFFFFF;
  --surface2:#F8FAFC;

  --text:#0F172A;
  --muted:#64748B;

  --border:#E5E7EB;
  --border2:#EEF2F6;

  --accent:#2563EB;
  --accentSoft:#E8F0FF;
  --success:#12B76A;

  --shadow: 0 20px 50px rgba(15,23,42,.08);
  --shadowSoft: 0 8px 20px rgba(15,23,42,.06);

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans","Manrope",sans-serif;
  color:var(--text);
  background:
    radial-gradient(820px 360px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(720px 340px at 90% -15%, rgba(96,165,250,.08), transparent 60%),
    var(--bg);
  line-height:1.6;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border2);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 8px 16px rgba(37,99,235,.20);
}
.brand__name{font-weight:800; font-family:"Fraunces","Plus Jakarta Sans",serif; letter-spacing:.2px}
.brand__tag{
  color:var(--muted); font-size:12px; padding:4px 10px;
  border:1px solid var(--border2); border-radius:999px;
  background:#fff;
}

.nav{display:flex; align-items:center; gap:18px}
.nav a{color:var(--muted); font-weight:600; font-size:14px}
.nav a:hover{color:var(--text)}

.menuBtn{
  display:none;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--border2);
  background:#fff;
  cursor:pointer;
}
.menuBtn span{display:block; height:2px; margin:7px 10px; background:var(--text); opacity:.7; border-radius:3px}

.mobileNav{
  display:none;
  padding:14px 20px 18px;
  border-top:1px solid var(--border2);
  background:#fff;
}
.mobileNav a{display:block; padding:10px 0; color:var(--muted); font-weight:600}
body.navOpen .mobileNav{display:block}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  border:1px solid var(--border);
  transition:.18s ease;
}
.btn--primary{
  border-color:transparent;
  background: var(--accent);
  color:#fff;
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.btn--primary:hover{transform:translateY(-1px); filter:saturate(1.02)}
.btn--secondary{background:#fff}
.btn--secondary:hover{background: var(--surface2); transform:translateY(-1px)}
.btn--ghost{background: var(--surface2)}
.w100{width:100%}

/* Hero */
.hero{padding:86px 0 62px}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}
.hero h1{
  font-family:"Fraunces","Plus Jakarta Sans",serif;
  font-size:46px;
  line-height:1.08;
  margin:14px 0 12px;
  letter-spacing:-.3px;
}
.lead{
  font-size:17px;
  color:rgba(15,23,42,.76);
  margin:0 0 18px;
  max-width: 60ch;
}
.leadSmall{font-size:16px; color:rgba(15,23,42,.72); margin:10px 0 0}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 14px}

/* Badges */
.badgeRow{display:flex; flex-wrap:wrap; gap:10px}
.badge{
  font-size:12px; font-weight:700;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background: #fff;
  color:rgba(15,23,42,.8);
}
.badge--soft{color:var(--muted); font-weight:600}

/* Trust row */
.trustRow{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.trustItem{
  border:1px solid var(--border2);
  background: #fff;
  border-radius: 14px;
  padding:12px;
  display:flex; gap:10px; align-items:flex-start;
  box-shadow: var(--shadowSoft);
}
.trustItem__icon{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface2);
  border:1px solid var(--border2);
}
.trustItem strong{display:block; font-size:13px}
.trustItem span{display:block; font-size:12px; color:var(--muted); margin-top:2px}

/* Hero visual card */
.hero__visual{position:relative; min-height: 420px}
.visualCard{
  position:relative;
  z-index:2;
  background: #fff;
  border:1px solid var(--border2);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.visualCard__top{
  display:flex; justify-content:space-between; gap:10px;
  padding:16px 16px 10px;
}
.pill{
  font-size:12px; font-weight:700;
  padding:7px 12px;
  border-radius:999px;
  background: var(--surface2);
  border:1px solid var(--border2);
  color:rgba(15,23,42,.82);
}
.pill--accent{
  border-color:transparent;
  background: var(--accentSoft);
  color:var(--text);
}
.visualCard__main{padding:14px 16px 16px}
.stat{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.stat__label{font-size:12px; color:var(--muted); font-weight:700}
.stat__value{font-size:15px; font-weight:800}

.meter{margin:12px 0}
.meter__label{display:flex; justify-content:space-between; font-size:12px; color:rgba(15,23,42,.72); margin-bottom:7px}
.meter__bar{height:10px; border-radius:999px; background: var(--surface2); overflow:hidden; border:1px solid var(--border2)}
.meter__fill{
  height:100%;
  border-radius:999px;
  background: var(--accent);
}
.meter__fill--alt{
  background: linear-gradient(90deg, rgba(15,23,42,.18), rgba(15,23,42,.06));
}

.miniGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.miniCard{
  border-radius: 14px;
  border:1px solid var(--border2);
  background: var(--surface2);
  padding:12px;
}
.miniCard__kpi{font-weight:800; letter-spacing:.6px}
.miniCard__txt{font-size:12px; color:var(--muted); margin-top:4px}

.visualCard__bottom{
  padding:12px 16px 14px;
  border-top:1px solid var(--border2);
  background: #fff;
}
.hint{font-size:12px; color:var(--muted)}

.glow{
  position:absolute; inset:auto;
  width:260px; height:260px; border-radius:50%;
  filter: blur(60px);
  opacity:.22;
  z-index:1;
}
.glow--a{left:-60px; top:50px; background: rgba(37,99,235,.20)}
.glow--b{right:-80px; bottom:-40px; background: rgba(96,165,250,.18)}

/* Sections */
.section{padding:96px 0}
.section--alt{
  background: var(--bgSoft);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
}
.sectionHead{margin-bottom:26px}
.sectionHead h2{
  font-family:"Fraunces","Plus Jakarta Sans",serif;
  font-size:32px; margin:0 0 10px;
  letter-spacing:-.2px;
}
.sectionHead p{margin:0; color:var(--muted); max-width:74ch}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.card{
  background: #fff;
  border:1px solid var(--border2);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadowSoft);
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted)}
.card--big{padding:22px}
.divider{height:1px; background: var(--border2); margin:14px 0}
.note{color:rgba(15,23,42,.78); margin:0}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.checkList{
  list-style:none; padding:0; margin:16px 0 0;
  display:flex; flex-direction:column; gap:10px;
}
.checkList li{display:flex; gap:10px; color:rgba(15,23,42,.78)}
.checkList li span{color:var(--success); font-weight:900}

/* Features */
.feature{
  background: #fff;
  border:1px solid var(--border2);
  border-radius: var(--radius);
  padding:18px;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow: var(--shadowSoft);
}
.feature__icon{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface2);
  border:1px solid var(--border2);
}
.feature h3{margin:0 0 6px; font-size:16px}
.feature p{margin:0; color:var(--muted)}

/* Compare */
.compare{
  margin-top:16px;
  border:1px solid var(--border2);
  background: #fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadowSoft);
}
.compare__head{padding:16px 18px; border-bottom:1px solid var(--border2)}
.compare__head h3{margin:0 0 6px}
.compare__head p{margin:0; color:var(--muted)}
.compare__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.compareCol{padding:18px}
.compareCol__title{font-weight:800; margin-bottom:10px}
.compareCol ul{margin:0; padding-left:18px; color:rgba(15,23,42,.78)}
.compareCol li{margin:8px 0}
.compareCol--accent{
  background: var(--accentSoft);
  border-left:1px solid var(--border2);
}

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.priceCard{
  background: #fff;
  border:1px solid var(--border2);
  border-radius: 20px;
  padding:18px;
  display:flex; flex-direction:column;
  box-shadow: var(--shadowSoft);
}
.priceCard__top p{color:var(--muted); margin:8px 0 0}
.priceCard h3{margin:8px 0 0}
.tag{
  display:inline-flex;
  font-size:11px; font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background: #fff;
  color:rgba(15,23,42,.82);
}
.tag--accent{
  border-color:transparent;
  background: var(--accent);
  color:#fff;
}
.priceList{
  margin:14px 0 18px;
  padding-left:18px;
  color:rgba(15,23,42,.78);
}
.priceList li{margin:9px 0}
.priceCard--featured{
  background: #fff;
  box-shadow: var(--shadow);
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:12px;
}
.step{
  background: #fff;
  border:1px solid var(--border2);
  border-radius: 16px;
  padding:14px;
  box-shadow: var(--shadowSoft);
}
.step__no{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  background: var(--surface2);
  border:1px solid var(--border2);
  margin-bottom:10px;
}
.step h3{margin:0 0 6px; font-size:15px}
.step p{margin:0; color:var(--muted); font-size:13px}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}
.form{
  background: #fff;
  border:1px solid var(--border2);
  border-radius: 20px;
  padding:18px;
  box-shadow: var(--shadowSoft);
}
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
label{display:flex; flex-direction:column; gap:8px; font-weight:700; font-size:13px; color:rgba(15,23,42,.88)}
input,textarea{
  width:100%;
  border-radius: 12px;
  border:1px solid var(--border2);
  background: #fff;
  color:var(--text);
  padding:12px 12px;
  outline:none;
  font-family:inherit;
}
input::placeholder,textarea::placeholder{color:rgba(102,112,133,.70)}
input:focus,textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.span2{grid-column: span 2}
.formHint{margin:10px 0 0; color:var(--muted); font-size:12px}

.miniNote{
  margin-top:14px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--border2);
  background: #fff;
  color:rgba(15,23,42,.78);
  box-shadow: var(--shadowSoft);
}
.miniNote .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--success);
  box-shadow: 0 0 18px rgba(18,183,106,.20);
}

/* Footer */
.footer{
  padding:28px 0;
  border-top:1px solid var(--border2);
  background: #fff;
}
.footer__inner{
  display:flex; justify-content:space-between; gap:14px;
  color:rgba(15,23,42,.78);
}
.muted{color:var(--muted); display:block; margin-top:4px}

/* Case Study */
.caseHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.eyebrow{
  display:inline-flex;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(15,23,42,.78);
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background: #fff;
  margin-bottom:10px;
}
.caseGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  margin-top:18px;
}
.caseCard{
  background:#fff;
  border:1px solid var(--border2);
  border-radius: 22px;
  padding:18px;
  overflow:hidden;
  box-shadow: var(--shadowSoft);
}
.caseCard--story{
  background: #fff;
}
.caseCard__top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.caseBadge{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background: #fff;
  color:rgba(15,23,42,.82);
}
.caseBadge--soft{color:var(--muted); font-weight:700}
.caseDivider{
  height:1px;
  background: var(--border2);
  margin:14px 0;
}
.caseList{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.caseList li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(15,23,42,.78);
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:6px;
  flex:0 0 10px;
}
.dot--ok{
  background: var(--success);
  box-shadow: 0 0 18px rgba(18,183,106,.18);
}
.dot--info{
  background: var(--accent);
  box-shadow: 0 0 18px rgba(37,99,235,.16);
}

.kpiGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.kpi{
  border:1px solid var(--border2);
  background: var(--surface2);
  border-radius: 16px;
  padding:14px;
}
.kpi__value{
  font-family:"Fraunces","Plus Jakarta Sans",serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:-.2px;
}
.kpi__label{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.reasonGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.reason{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--border2);
  background: #fff;
  border-radius: 16px;
  padding:12px;
}
.reason__icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--surface2);
  border:1px solid var(--border2);
}
.reason p{margin:4px 0 0}

.caseCTA{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--border2);
  padding-top:14px;
}
.caseCTA__text span{display:block; margin-top:4px}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; gap:18px}
  .hero__visual{min-height: unset}
  .trustRow{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .formGrid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .compare__grid{grid-template-columns:1fr}
  .compareCol--accent{border-left:none; border-top:1px solid var(--border2)}
  .nav{display:none}
  .menuBtn{display:block}

  .caseHead{align-items:flex-start; flex-direction:column}
  .caseGrid{grid-template-columns:1fr}
  .reasonGrid{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .hero{padding:60px 0 44px}
  .hero h1{font-size:34px}
  .section{padding:74px 0}
}