:root{
  /* Palette (light minimal) */
  --bg:#FFFFFF;
  --text:#0B0B0B;
  --muted:#6A6A6A;
  --card:#F7F7F7;
  --line:#E5E5E5;
  --blue:#63A7F9; /* glowing blue stays */
  --orange:#E06A3C; /* brand warm accent */
  --teal:#45D4D4; /* support accent */
  --slate:#C9C9C9;
  --maxw:960px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Header */
header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(130%) blur(12px); background:rgba(255,255,255,.8); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; height:68px; width:100%}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; flex:0 0 auto}
.dot{width:12px; height:12px; border-radius:999px; background:var(--blue); box-shadow:0 0 22px rgba(99,167,249,.55)}
.brand span{font-size:18px}
.nav > div:last-child{display:flex; align-items:center; margin-left:auto; flex:0 0 auto}
.nav a.btn{margin-left:14px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:8px 14px; font-weight:600; text-decoration:none; border:1px solid transparent; transition:.2s ease}
.btn-primary{background:var(--blue); color:#021528; border:1px solid rgba(2,21,40,.12); box-shadow:0 6px 18px rgba(99,167,249,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{color:var(--text); border-color:var(--line); background:#fff} 
.btn-ghost:hover{background:#F4F7FF; border-color:rgba(99,167,249,.35)}

/* Hero */
.hero{padding:96px 0 72px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(36px,6vw,56px); line-height:1.08; margin:0 0 18px; font-weight:700; letter-spacing:-.02em}
.hero p.sub{font-size:clamp(16px,2.2vw,20px); color:var(--muted); margin:0 0 14px}

.actions{display:flex; gap:14px; flex-wrap:wrap}

/* Capacity section */
section{padding:64px 0; background:#FFFFFF;}
h2{font-size:clamp(24px,3.2vw,32px); line-height:1.2; margin:0 0 10px}
p.lead{color:var(--muted); margin:0 0 22px}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:48px}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#6B7280; font-size:12px; letter-spacing:.3px; text-transform:uppercase}
ul.clean{list-style:none; padding:0; margin:22px 0 0}
ul.clean li{display:flex; align-items:flex-start; gap:10px; padding:8px 0; color:#374151}
ul.clean li:before{content:''; width:7px; height:7px; border-radius:999px; background:var(--orange); display:inline-block; margin-top:9px}

/* ROI block */
.roi{padding:72px 0; border-block:1px solid var(--line); background:#FFFFFF;} 
.roi .card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 4px 18px rgba(0,0,0,.04)}
.card h3{margin:0 0 6px; font-size:18px}
.index{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:999px; background:var(--blue); color:#021528; font-weight:600; border:1px solid rgba(99,167,249,.35); margin-right:10px;}

/* Reassurance */
.bar{height:1px; background:linear-gradient(90deg, transparent, var(--orange), transparent); opacity:.65}

/* Footer */
footer{padding:48px 0 64px; border-top:1px solid var(--line); color:#B9B9B9}
footer .row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.tiny{font-size:12px; opacity:.65}

/* Responsive */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr; gap:22px}
  .cards{grid-template-columns:1fr}
  .hero{padding:64px 0 40px}
  .logo-row{grid-template-columns:repeat(3, minmax(0,1fr))}
  .calc .row{grid-template-columns:1fr}
}

/* Integrations */
.integrations .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.integrations .bucket{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
.integrations .bucket h3{margin:0 0 6px; font-size:18px}
.logo-row{margin-top:16px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.logo{border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-align:center; color:#4B5563; font-size:13px; background:#fff}
.logo img, img.logo{max-width:100%; height:60px; object-fit:contain; border:none; border-radius:0; padding:12px; background:transparent}
.calc{margin-top:22px}
.calc .row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.calc label{display:block; font-size:12px; color:#C9CDD2; margin-bottom:6px}
.calc input{width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text)}
.calc .result{margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px}

/* Stat bar */
.statbar{border-bottom:1px solid var(--line); background:#FAFBFF}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.stat-box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; text-align:center; position:relative; box-shadow:0 4px 18px rgba(0,0,0,.04)}
.stat-box .num{display:block; font-size:clamp(28px,5vw,40px); font-weight:600; letter-spacing:-.02em; margin-bottom:6px}
.stat-box .label{color:#6B7280; font-size:12px}

/* Tooltip */
.stat-box[data-tip]:after{content:attr(data-tip); position:absolute; left:50%; transform:translate(-50%, 8px); bottom:-8px; width:max-content; max-width:260px; background:#111827; color:#F9FAFB; font-size:12px; padding:8px 10px; border-radius:8px; opacity:0; pointer-events:none; transition:.15s ease; box-shadow:0 8px 18px rgba(0,0,0,.18)}
.stat-box:hover:after{opacity:1; transform:translate(-50%, 12px)}

.lead-form{display:flex; gap:10px; align-items:center; justify-content:center; max-width:520px; margin:10px auto 0}
.lead-input{flex:1; min-width:220px; max-width:320px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--text)}

/* Improve readability in lower sections */
.integrations{background:#FFFFFF; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
footer{color:#6B7280}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; margin-top:1.2rem}
.card{position:relative; padding:1.6rem 1.2rem 1.3rem 1.2rem; background:var(--card); border:1px solid var(--line); border-radius:18px; transition:.18s all ease; box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04); min-width:0; z-index:1}
.card:hover{transform: translateY(-4px) scale(1.01); border-color:var(--blue); box-shadow: 0 6px 24px rgba(99,167,249,.15)}
.card h3{margin:.1rem 0 .4rem; font-size:1.18rem}
.card p{color:var(--muted)}

/* ROI Section fixes */
.roi .card .stat{font-size:1.1rem; font-weight:600; color:var(--text); margin-bottom:8px}
.roi .card .muted{color:var(--muted); font-size:0.95rem}