:root{
  --kipi-mint:#19D3C5;
  --kipi-mint-dark:#0FB9AD;
  --kipi-mint-light:#DFFAF7;
  --kipi-black:#111111;
  --kipi-cream:#FFF9F1;
  --kipi-warm-white:#FFFCF8;
  --kipi-gray-900:#1B1B1B;
  --kipi-gray-700:#4B4B4B;
  --kipi-gray-500:#7E7E7E;
  --kipi-gray-200:#E8E8E8;
  --kipi-white:#FFFFFF;

  --kipi-font-display:"Nunito",ui-rounded,system-ui,sans-serif;
  --kipi-font-body:"Inter",system-ui,sans-serif;

  --kipi-radius-sm:12px;
  --kipi-radius-md:20px;
  --kipi-radius-lg:32px;
  --kipi-radius-xl:44px;
  --kipi-radius-pill:999px;

  --kipi-shadow-soft:0 18px 45px rgba(17,17,17,.08);
  --kipi-shadow-card:0 12px 30px rgba(17,17,17,.06);
  --kipi-shadow-mint:0 18px 40px rgba(25,211,197,.20);

  --kipi-max-width:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--kipi-font-body);
  color:var(--kipi-gray-900);
  background:var(--kipi-warm-white);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.kipi-container{
  width:min(calc(100% - 40px),var(--kipi-max-width));
  margin-inline:auto;
}

.kipi-display{
  font-family:var(--kipi-font-display);
  font-weight:800;
  letter-spacing:-.03em;
}

.kipi-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:var(--kipi-radius-pill);
  background:var(--kipi-mint-light);
  color:var(--kipi-black);
  font-weight:700;
  font-size:.9rem;
}

.kipi-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.2rem;
  border-radius:var(--kipi-radius-pill);
  font-weight:800;
  border:2px solid transparent;
  transition:.2s ease;
  cursor:pointer;
}
.kipi-btn--primary{
  background:var(--kipi-mint);
  color:var(--kipi-black);
  box-shadow:var(--kipi-shadow-mint);
}
.kipi-btn--primary:hover{
  transform:translateY(-2px);
  background:var(--kipi-mint-dark);
}
.kipi-btn--secondary{
  background:var(--kipi-white);
  border-color:var(--kipi-black);
  color:var(--kipi-black);
}
.kipi-btn--secondary:hover{
  background:var(--kipi-cream);
}

.kipi-card{
  background:var(--kipi-white);
  border:1px solid rgba(17,17,17,.06);
  border-radius:var(--kipi-radius-lg);
  box-shadow:var(--kipi-shadow-card);
  padding:1.5rem;
}

.kipi-section{
  padding:88px 0;
}

.kipi-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.kipi-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
}

.kipi-hero{
  padding:72px 0 56px;
}
.kipi-hero__wrap{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:48px;
  align-items:center;
}
.kipi-hero h1{
  margin:0 0 18px;
  font:800 clamp(3rem,7vw,5.8rem)/.95 var(--kipi-font-display);
  letter-spacing:-.05em;
}
.kipi-hero p{
  margin:0 0 28px;
  max-width:620px;
  color:var(--kipi-gray-700);
  font-size:clamp(1rem,1.6vw,1.25rem);
}
.kipi-hero__visual{
  border-radius:var(--kipi-radius-xl);
  background:
    radial-gradient(circle at 70% 25%, rgba(25,211,197,.28), transparent 35%),
    linear-gradient(135deg,var(--kipi-cream),#fff);
  min-height:460px;
  display:grid;
  place-items:center;
  padding:32px;
}

.kipi-feature-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:16px;
  background:var(--kipi-mint-light);
  margin-bottom:16px;
  font-size:1.35rem;
}

.kipi-proof{
  background:var(--kipi-black);
  color:white;
}
.kipi-proof .kipi-card{
  background:#181818;
  border-color:#242424;
  color:white;
}

.kipi-cta{
  background:var(--kipi-mint);
  border-radius:var(--kipi-radius-xl);
  padding:48px;
}

.kipi-nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(255,252,248,.88);
  border-bottom:1px solid rgba(17,17,17,.05);
}
.kipi-nav__inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.kipi-nav__brand{
  font:800 1.75rem/1 var(--kipi-font-display);
}
.kipi-nav__links{
  display:flex;
  gap:24px;
  color:var(--kipi-gray-700);
  font-weight:600;
}
.kipi-nav__actions{
  display:flex;
  gap:10px;
}

@media (max-width:900px){
  .kipi-hero__wrap,
  .kipi-grid-2,
  .kipi-grid-3{grid-template-columns:1fr}
  .kipi-nav__links{display:none}
  .kipi-hero{padding-top:40px}
  .kipi-hero__visual{min-height:340px}
  .kipi-section{padding:64px 0}
  .kipi-cta{padding:32px}
}