:root{
  --kg-white: #FFFFFF;
  --kg-gray: #4A4A4A;
  --kg-blue: #1F7A8C;
  --kg-navy: #0B3C5D;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#5b6b7c;
  --card:#f6f9ff;
  --line:#e6eef9;
  --primary:#0B2F6A; /* navy */
  --accent:#1AA7B8;  /* teal */
  --primary-2:#1E88E5; /* blue */
  --shadow: 0 10px 30px rgba(2, 12, 27, .10);
  --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-sans);

  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 90% -10%, rgba(26,167,184,.16), transparent 60%),
              radial-gradient(900px 520px at -10% 0%, rgba(30,136,229,.12), transparent 55%),
              var(--bg);
}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%); margin:0 auto}
.pill{display:inline-flex;gap:.5rem;align-items:center;padding:.45rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.7);backdrop-filter: blur(6px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.1rem;border-radius:14px;border:1px solid transparent;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white;font-weight:700; box-shadow: 0 12px 24px rgba(11,47,106,.22);
}
.btn.secondary{
  background:transparent;
  border-color:rgba(11,47,106,.18);
  color:var(--primary);
  box-shadow:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(230,238,249,.7);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding: 14px 0;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:44px;height:44px}
.brand .name{font-weight:900; letter-spacing:-.02em}
.brand .tag{font-size:.86rem;color:var(--muted);margin-top:.1rem}
.navlinks{display:flex;gap:1.1rem;align-items:center}
.navlinks a{color:var(--muted);font-weight:600}
.navlinks a:hover{color:var(--primary)}
.menu-btn{display:none; background:transparent;border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem}
.menu-panel{display:none}

.hero{padding:3.2rem 0 2.2rem}
.hero-grid{
  display:grid;grid-template-columns: 1.15fr .85fr;gap:2rem;align-items:center
}
h1{font-size: clamp(2.15rem, 3.5vw, 3.05rem); line-height:1.08;margin:.7rem 0 1rem; letter-spacing:-.03em}
.lead{font-size:1.08rem;color:var(--muted);line-height:1.6;margin:0 0 1.4rem}
.cta{display:flex;gap:.85rem;flex-wrap:wrap}
.hero-card{
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.hero-card .stat{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border-radius:16px;background:linear-gradient(180deg, rgba(246,249,255,.9), rgba(255,255,255,.9)); border:1px solid rgba(230,238,249,.8); margin:.7rem 0}
.icon{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(11,47,106,.12), rgba(26,167,184,.14));
  border:1px solid rgba(11,47,106,.12);
}
.stat h3{margin:0;font-size:1rem}
.stat p{margin:.15rem 0 0;color:var(--muted);font-size:.93rem;line-height:1.45}

.section{padding:3rem 0}
.section h2{font-size:1.85rem;letter-spacing:-.02em;margin:0 0 .7rem}
.section .sub{color:var(--muted);margin:0 0 1.8rem;line-height:1.6}
.grid{
  display:grid;gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.2rem;
  box-shadow: 0 8px 20px rgba(2,12,27,.06);
}
.card h3{margin:.6rem 0 .3rem;font-size:1.05rem}
.card p{margin:0;color:var(--muted);line-height:1.55}
.card ul{margin:.55rem 0 0;padding-left:1.1rem;color:var(--muted);line-height:1.55}
.card li{margin:.2rem 0}

.split{
  display:grid;grid-template-columns: 1fr 1fr;gap:1.2rem;align-items:start
}
.form{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.25rem;
  box-shadow: var(--shadow);
}
label{display:block;font-weight:700;font-size:.92rem;margin:.75rem 0 .35rem}
input, select, textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius:14px;
  border:1px solid rgba(11,47,106,.16);
  background:#fff;
  outline:none;
  font-size:1rem;
}
textarea{min-height:130px;resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(30,136,229,.55);
  box-shadow: 0 0 0 4px rgba(30,136,229,.12);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form .help{color:var(--muted);font-size:.92rem;line-height:1.55;margin:.65rem 0 0}
.form .actions{margin-top:1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.small{font-size:.92rem;color:var(--muted)}
.notice{
  margin-top:1rem;
  padding:.85rem 1rem;border-radius:14px;
  border:1px dashed rgba(11,47,106,.25);
  background:rgba(246,249,255,.7);
  color:var(--muted);
}

footer{
  padding:2.3rem 0;
  border-top:1px solid rgba(230,238,249,.8);
  color:var(--muted);
}
.footer-grid{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-grid a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .7rem;border-radius:999px;
  border:1px solid rgba(11,47,106,.16);
  background:rgba(255,255,255,.7);
  color:var(--primary);
  font-weight:700;
}

/* Terms page */
.prose{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.4rem;
  box-shadow: var(--shadow);
}
.prose h1{margin-top:.2rem}
.prose h2{margin-top:1.3rem}
.prose p, .prose li{color:var(--muted);line-height:1.7}
.prose ol{padding-left:1.2rem}
.prose li{margin:.35rem 0}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr;gap:1.2rem}
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .navlinks{display:none}
  .menu-btn{display:inline-flex}
  .menu-panel{
    display:none;
    padding:0 0 1rem;
  }
  .menu-panel a{
    display:block;
    padding:.7rem 0;
    border-top:1px solid rgba(230,238,249,.8);
    color:var(--muted); font-weight:650;
  }
  .menu-panel a:hover{color:var(--primary)}
  .form .row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

/* Floating WhatsApp button */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 45px rgba(2, 15, 30, .22);
  z-index: 999;
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  transform: translateZ(0);
}
.whatsapp-float:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.whatsapp-float svg{width:26px;height:26px;display:block}


/* Partners carousel */
.partners{
  overflow:hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: var(--shadow);
}
.partners-track{
  display:flex;
  gap: 28px;
  padding: 18px 22px;
  align-items:center;
  width: max-content;
  animation: partners-scroll 28s linear infinite;
}
.partners:hover .partners-track{ animation-play-state: paused; }
.partner{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(11,47,106,.04);
  border: 1px solid rgba(11,47,106,.10);
  min-width: 160px;
  height: 62px;
}
.partner img{
  max-height: 34px;
  max-width: 130px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: .92;
}
@keyframes partners-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .partners-track{ animation:none; flex-wrap:wrap; width: 100%; }
}

/* Captcha */
.captcha{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.captcha-q{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11,47,106,.06);
  border: 1px solid rgba(11,47,106,.14);
  font-weight: 600;
}

.brand img{flex:0 0 auto;}