/* Mobenal — minimalist executive landing (no frameworks) */
:root{
  --navy:#0B1F2A;
  --offwhite:#F2F4F7;
  --gray:#E5E7EB;
  --text:#0A0A0A;
  --muted: rgba(10,10,10,.68);
  --white:#ffffff;
  --radius: 18px;
  --shadow: 0 12px 34px rgba(11,31,42,.10);
  --shadow2: 0 10px 28px rgba(11,31,42,.14);
  --max: 1120px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--offwhite);
  line-height: 1.45;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.micro{font-size:12.5px; line-height:1.35}
.sep{opacity:.55; padding:0 6px}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; padding:10px 12px; background:var(--white); border-radius:10px; box-shadow:var(--shadow)}

.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(242,244,247,.80);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11,31,42,.08);
}
.header-inner{display:flex; align-items:center; gap:14px; padding: 14px 0;}
.brand{display:flex; align-items:center; gap:10px; min-width: 170px;}
.brand-mark{
  width:36px; height:36px; border-radius:12px;
  background: var(--navy); color: var(--white);
  display:grid; place-items:center; font-weight:700;
}
.brand-name{font-weight:700; letter-spacing:.2px}
.nav{display:flex; gap:18px; margin-left:auto}
.nav-link{font-size:14px; color: rgba(10,10,10,.80)}
.nav-link:hover{color: rgba(10,10,10,1)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,42,.14);
  background: transparent;
  cursor:pointer; font-weight: 600;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{background: var(--navy); color: var(--white); border-color: transparent; box-shadow: var(--shadow);}
.btn-outline{color: var(--navy); border-color: rgba(11,31,42,.25);}
.btn-sm{padding: 10px 12px; border-radius: 12px; font-size: 13px}
.btn-lg{padding: 14px 18px; border-radius: 16px; font-size: 14.5px}

.menu-btn{
  display:none; margin-left: 6px;
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(11,31,42,.14);
  background: rgba(255,255,255,.55);
  cursor:pointer;
}
.menu-btn span{display:block; height:2px; margin:6px 10px; background: rgba(10,10,10,.75); border-radius: 2px;}
.mobile-menu{padding: 14px 22px 18px; border-top: 1px solid rgba(11,31,42,.08);}
.mobile-link{display:block; padding:10px 0; color: rgba(10,10,10,.86)}

.hero{padding: 56px 0 36px;}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch;}
.eyebrow{
  display:inline-flex; padding: 6px 10px; border-radius: 999px;
  background: rgba(11,31,42,.06); border: 1px solid rgba(11,31,42,.10);
  font-size: 12.5px; color: rgba(10,10,10,.78); margin: 0 0 12px;
}
h1{margin: 8px 0 10px; font-size: 44px; line-height: 1.03; letter-spacing: -0.6px;}
.lead{font-size: 17px; color: rgba(10,10,10,.78); max-width: 520px; margin: 0 0 18px;}
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap: wrap}
.tool-strip{display:flex; gap:10px; flex-wrap: wrap; margin-top:16px}
.tool-pill{padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(11,31,42,.12); background: rgba(255,255,255,.65); font-size: 12.5px;}
.tool-pill.muted{opacity:.75}
.disclaimer{margin-top: 14px; font-size: 12.5px; color: rgba(10,10,10,.62);}

.hero-visual{display:flex; align-items: center; justify-content: center;}
.viz-card{
  width: 100%; border-radius: 22px; background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,31,42,.10); box-shadow: var(--shadow2);
  padding: 18px; position: relative; overflow:hidden;
}
.viz-card::before{
  content:""; position:absolute; inset:-120px -80px auto auto;
  width: 340px; height: 340px;
  background: radial-gradient(circle at 30% 30%, rgba(11,31,42,.22), transparent 55%);
  transform: rotate(18deg);
}
.viz-header{display:flex; align-items:center; gap:6px; margin-bottom: 14px;}
.viz-dot{width:10px; height:10px; border-radius:999px; background: rgba(11,31,42,.16);}
.viz-title{margin-left:8px; font-size: 12.5px; color: rgba(10,10,10,.65)}
.viz-grid{display:grid; gap: 12px; margin-top: 6px}
.viz-k{font-size: 12.5px; color: rgba(10,10,10,.65)}
.viz-v{height:10px; border-radius: 999px; background: rgba(11,31,42,.08); overflow:hidden}
.viz-bar{display:block; height:100%; width: var(--w); background: rgba(11,31,42,.52); border-radius: 999px}
.viz-note{margin-top: 12px; font-size: 12.5px; color: rgba(10,10,10,.60)}

.section{padding: 54px 0}
.section-alt{background: rgba(255,255,255,.45); border-top: 1px solid rgba(11,31,42,.06); border-bottom: 1px solid rgba(11,31,42,.06)}
.section-head{margin-bottom: 18px}
.section-head h2{margin:0 0 8px; font-size: 28px; letter-spacing: -0.2px;}

.card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: 0 10px 26px rgba(11,31,42,.06);
  padding: 18px;
}
.card-ghost{background: rgba(11,31,42,.04)}
.two-col{display:grid; gap: 16px; grid-template-columns: 1fr 1fr;}
.list{margin: 12px 0 0; padding-left: 18px; color: rgba(10,10,10,.78)}
.list li{margin: 8px 0}

.grid-4{display:grid; gap: 14px; grid-template-columns: repeat(4, 1fr);}
.grid-4 .card h3{margin:0 0 6px; font-size:16px}

.steps{display:grid; gap: 12px}
.step{
  display:grid; grid-template-columns: 44px 1fr; gap: 12px;
  align-items:start; padding: 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.75); border: 1px solid rgba(11,31,42,.10);
}
.step-num{
  width:44px; height:44px; border-radius: 16px;
  background: rgba(11,31,42,.08); display:grid; place-items:center;
  font-weight: 700; color: rgba(10,10,10,.78);
}
.step h3{margin: 2px 0 4px; font-size:16px}
.step p{margin:0}

.pricing{display:grid; gap: 14px; grid-template-columns: repeat(3, 1fr);}
.price-card{display:flex; flex-direction:column}
.tag{
  display:inline-flex; margin-left: 8px; font-size: 11.5px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(11,31,42,.08); border: 1px solid rgba(11,31,42,.10);
  color: rgba(10,10,10,.72); vertical-align: middle;
}
.tag-strong{background: rgba(11,31,42,.12); border-color: rgba(11,31,42,.14);}
.price{margin: 0 0 6px; font-weight: 700; font-size: 22px; letter-spacing: -0.2px;}
.price span{font-weight: 600; font-size: 12.5px; color: rgba(10,10,10,.62)}
.pc-cta{margin-top:auto; padding-top: 12px}
.highlight{border-color: rgba(11,31,42,.22); box-shadow: 0 16px 40px rgba(11,31,42,.14); transform: translateY(-2px);}
.highlight .price{color: var(--navy)}

.after{display:grid; gap: 12px; grid-template-columns: repeat(3, 1fr);}
.after-item{
  display:grid; grid-template-columns: 44px 1fr; gap: 12px; align-items:start;
  padding: 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.75); border: 1px solid rgba(11,31,42,.10);
}
.after-num{
  width:44px; height:44px; border-radius: 16px;
  background: rgba(11,31,42,.08); display:grid; place-items:center;
  font-weight: 700; color: rgba(10,10,10,.78);
}
.after-item h3{margin: 2px 0 4px; font-size: 16px}
.after-item p{margin: 0}

.final-cta{
  margin-top: 18px; padding: 20px; border-radius: 22px;
  background: rgba(11,31,42,.06); border: 1px solid rgba(11,31,42,.10);
}
.final-cta h2{margin: 0 0 8px; font-size: 24px}

.footer{padding: 26px 0 34px; border-top: 1px solid rgba(11,31,42,.08); background: rgba(242,244,247,.95);}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap: 16px;}
.brand-footer .brand-mark{width:32px; height:32px; border-radius: 12px}
.footer-link{display:block; color: rgba(10,10,10,.78); padding: 6px 0}
.footer-link:hover{color: rgba(10,10,10,1)}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr;}
  h1{font-size: 38px}
  .grid-4{grid-template-columns: 1fr 1fr}
  .pricing{grid-template-columns: 1fr}
  .after{grid-template-columns: 1fr}
  .nav{display:none}
  .menu-btn{display:inline-block; margin-left:auto}
  .btn-sm{display:none}
  .brand{min-width:auto}
}
@media (max-width: 520px){
  .container{padding: 0 16px}
  h1{font-size: 34px}
  .section{padding: 46px 0}
}


/* LinkedIn footer link */
.linkedin-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,42,.14);
  background: rgba(255,255,255,.65);
  color: rgba(10,10,10,.80);
}
.linkedin-link:hover{color: rgba(10,10,10,1)}
.linkedin-ico{
  width:18px;
  height:18px;
  fill: rgba(10,10,10,.78);
}
.linkedin-text{
  font-weight:600;
  font-size: 13px;
}