*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#ffffff;line-height:1.6}
a{color:#0ea5e9;text-decoration:none} a:hover{text-decoration:none}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
header{border-bottom:1px solid #e2e8f0;background:#ffffff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.logo img{height:45px;width:auto}
.menu{display:flex;align-items:center;gap:18px;font-weight:500;flex-wrap:wrap}
.menu a{color:#1f2937;opacity:.9} .menu a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;background:#0ea5e9;color:#fff;font-weight:500;text-decoration:none;border:2px solid #0ea5e9;box-shadow:0 6px 14px rgba(14,165,233,.18);min-height:44px;min-width:44px;font-size:16px}
.btn.alt{background:transparent;color:#0ea5e9;box-shadow:none;border-radius:12px}
.hero{padding:72px 0 56px;background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%);border-bottom:1px solid #e2e8f0;position:relative;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;right:-220px;top:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #22c55e22, transparent 70%)}
.hero::after{content:"";position:absolute;left:-200px;bottom:-240px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #0ea5e922, transparent 70%)}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin-bottom:14px;letter-spacing:-.02em}
.hero p{font-size:16px;color:#334155;margin:0 auto 20px auto;max-width:720px}
.hero .cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.section{padding:64px 0}
.section.alt{background:#f8fafc}
.section h2{font-size:clamp(20px,3.2vw,30px);margin-bottom:14px;letter-spacing:-.01em;text-align:center}
.kicker{font-size:13px;font-weight:800;color:#0ea5e9;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;text-align:center}
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grid.cols-3,.grid.cols-2,.compare{grid-template-columns:1fr}}
.card{border:1px solid #e2e8f0;border-radius:16px;padding:20px;background:#fff;box-shadow:0 10px 22px rgba(2,6,23,.05)}
.card h3{font-size:18px;margin-bottom:8px}
.card h4{font-size:24px;margin-bottom:8px}
.card p{color:#475569}
.stepwrap{background:linear-gradient(135deg,#e0f2fe 0%,#ecfccb 100%);border:1px solid #bae6fd;border-radius:18px;padding:22px}
.step{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;box-shadow:0 8px 18px rgba(2,6,23,.05)}
.step .badge{display:inline-block;background:#0ea5e915;color:#0ea5e9;border:1px solid #7dd3fc;padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.06em}
.calc .result{margin-top:10px;background:#ecfeff;border:1px solid #a5f3fc;color:#0c4a6e;padding:12px 14px;border-radius:12px;font-weight:800}
input[type="text"],input[type="tel"]{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px}
input[type="text"]:focus,input[type="tel"]:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.compare{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
.box{border:1px solid #e2e8f0;border-radius:14px;padding:18px;background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.05)}
.box.highlight{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#0ea5e9,#22c55e) border-box}
.box .metric{font-size:22px;font-weight:900;margin-top:6px}
.box .sub{font-size:13px;color:#475569;margin-top:4px}
.skyline{border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 10px 22px rgba(2,6,23,.05)}
.skyline img{width:100%;height:auto;display:block}
.about-body{max-width:900px;margin:0 auto;background:linear-gradient(145deg,#e0f2fe18 0%,#ecfccb18 100%);border-radius:16px;padding:28px;text-align:center}
.about-body p{margin-bottom:16px}
.about-body .highlight{background:linear-gradient(90deg,rgb(14, 164, 233),rgb(34, 197, 94));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
footer{border-top:1px solid #e2e8f0;background:#f8fafc;margin-top:48px}
.footer-inner{padding:22px 0;font-size:14px;color:#475569;text-align:center;display:block}
.footer-inner .row{margin:4px 0}
.small{font-size:14px;color:#475569}
.smallest{font-size:12px;color:#475569; max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;}
.smallest p{line-height: 1.3;text-align: center;}
.muted{color:#64748b}
.bigpill{display:inline-flex;align-items:center;justify-content:center;padding:18px 28px;border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#22c55e);color:#fff;font-weight:700;text-decoration:none;border:none;box-shadow:0 8px 22px rgba(14,165,233,.22);min-height:44px;min-width:44px;font-size:18px}
.bigpill:hover{opacity:.95}
.bigpill2{display:inline-flex;align-items:center;justify-content:center;padding:18px 28px;border-radius:12px;
background:linear-gradient(-135deg,#0ea5e9,#22c55e);color:#fff;font-weight:700;text-decoration:none;border:none;box-shadow:0 8px 22px rgba(14,165,233,.22);min-height:44px;min-width:44px;font-size:18px}
.bigpill2:hover{opacity:.95}

/* Mobile tweaks */
@media (max-width: 640px){
  .hero{padding:40px 0 28px}
  .hero h1{font-size:30px}
  .hero p{font-size:16px}
  .section{padding:40px 0}
  .card,.step{padding:14px}
  .btn{padding:10px 14px;border-radius:10px}
  .menu{gap:12px}
  .menu a{font-size:15px}
  .logo img{height:32px}
  .card,.step,.box{box-shadow:0 4px 12px rgba(2,6,23,.06)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important}
}

/* v9.5 mobile refinements */
@media (max-width: 640px){
  /* Pull nav and logo in from edges and scale down slightly */
  .container{padding:0 12px}
  header .nav{padding:10px 0}
  .logo img{height:28px}
  .menu{gap:10px}
  .menu a{font-size:14px}
  .btn{padding:9px 12px;font-size:15px;border-radius:10px}

  /* Compare section stacks vertically and stays centered */
  .compare{grid-template-columns:1fr;gap:16px}
  .compare .box{max-width:560px;margin:0 auto}
}