/* KelVis Design — minimalist, modern landing page */
:root{
  --bg:#0b0c10;
  --elev:#111217;
  --text:#e8e9ee;
  --muted:#b7bac6;
  --brand1:#7c5cff;
  --brand2:#40e0d0;
  --stroke: rgba(255,255,255,0.08);
  --ring: rgba(124,92,255,0.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,0.15), transparent 50%),
              radial-gradient(900px 500px at -10% 10%, rgba(64,224,208,0.08), transparent 50%),
              var(--bg);
  line-height:1.6;
}

.container{width:min(1120px, 92%); margin-inline:auto}

.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; position:sticky; top:0; z-index:10;
  /* Remove direct backdrop-filter, use gradient blur overlay instead */
  background: transparent;
  overflow: visible;
}

.header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  /* Create a vertical gradient mask for blur */
  backdrop-filter: blur(18px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand:focus, .brand:active {
  outline: none;
  text-decoration: none;
  box-shadow: none;
  color: inherit;
}
.brand-text{font-weight:700; letter-spacing:.2px; color:var(--text)}
.brand-text {
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  background: rgba(17, 18, 23, 0.65);
  border-radius: 999px;
  padding: 6px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.12);
}

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

/* Mobile nav */
.nav-toggle{display:none; background:none; border:0; width:42px; height:42px; position:relative}
.nav-toggle span{position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:.2s}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:26px}

.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center;
  padding:72px 0 48px;
}
.hero h1{font-size: clamp(28px, 4vw, 48px); line-height:1.1; margin:0 0 16px}
.grad{background: linear-gradient(90deg, var(--brand1), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{color:var(--muted); max-width:60ch; margin:0 0 20px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 16px}
.hero-cta .btn--primary {
  margin-left: 4px;
}

.pill-list{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:12px 0 0; list-style:none}
.pill-list li{border:1px solid var(--stroke); color:var(--muted); border-radius:999px; padding:6px 12px; font-size:14px}

.btn{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 16px; border-radius:10px; border:1px solid var(--stroke); text-decoration:none; font-weight:600; transition:.2s; cursor:pointer}
.btn--primary{background:linear-gradient(90deg, var(--brand1), var(--brand2)); color:#0a0b0f; border-color:transparent; box-shadow:0 10px 20px -10px var(--ring)}
.btn--primary:hover{transform: translateY(-1px)}
.btn--ghost{color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,0.04)}

.hero-mock{display:flex; justify-content:center}
.mock-card{width:min(520px, 100%); border:1px solid var(--stroke); border-radius:20px; background:var(--elev); box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.mock-top{display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--stroke)}
.dot{width:10px; height:10px; border-radius:50%; background:#2b2d35}
.mock-body{padding:16px}
.mock-hero{height:140px; border-radius:14px; background:linear-gradient(135deg, rgba(124,92,255,.35), rgba(64,224,208,.25))}
.mock-grid{margin-top:12px; display:grid; gap:12px; grid-template-columns:repeat(4,1fr)}
.mock-cell{height:72px; background:#181a22; border:1px solid var(--stroke); border-radius:12px}

.section{padding:48px 0}
.section-head h2{margin:0 0 6px; font-size: clamp(22px, 3.2vw, 36px)}
.section-head p{color:var(--muted); margin:0 0 22px}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.thumb {
  height: 160px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  display: block;
}
.skeleton{background:linear-gradient(90deg, #171923, #1d2030 50%, #171923); background-size:200% 100%; animation:shimmer 2.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px}
.card-body p{margin:0; color:var(--muted)}

.steps{display:grid; gap:16px; padding:0; margin:0; list-style:none; counter-reset:step}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:14px; border:1px solid var(--stroke); border-radius:16px; padding:16px; align-items:flex-start; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.step-num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(124,92,255,.15); color:#cfc9ff; font-weight:700; border:1px solid var(--stroke)}

.contact .contact-box{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; border:1px solid var(--stroke); border-radius:18px; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)
}
.contact-copy p{color:var(--muted)}
.contact-form{display:grid; gap:12px}
label{display:grid; gap:6px; font-weight:600; font-size:14px; color:var(--muted)}
input, textarea{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--stroke); background:#0f1016; color:var(--text);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus{border-color:var(--brand1); box-shadow:0 0 0 3px var(--ring)}
.form-note{font-size:12px; color:var(--muted); margin:6px 0 0}

.footer{padding:40px 0 60px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--stroke); padding-top:18px}
.tiny{color:var(--muted); font-size:13px}

/* Responsive */
@media (max-width: 920px){
  .hero{grid-template-columns:1fr; gap:32px}
  .nav{display:none}
  .nav-toggle{display:block}
}

@media (max-width: 760px){
  .cards{grid-template-columns:1fr}
  .mock-grid{grid-template-columns:repeat(2,1fr)}
  .contact .contact-box{grid-template-columns:1fr}
}