/* =========================================================
   KOGNITS LANDING PAGE – FINAL CLEAN PRODUCTION CSS
   BANNER CSS REMOVED
========================================================= */

/* =========================
   ROOT VARIABLES
========================= */
:root {
  --kg-primary: #1A2B4C;
  --kg-primary-2: #004B50;
  --kg-accent: #40E0D0;
  --kg-accent-2: #00F5FF;

  --kg-bg: #F8FAFC;
  --kg-surface: #ffffff;
  --kg-text: #374151;
  --kg-muted: #6B7280;
  --kg-line: #E5E7EB;

  --kg-radius: 22px;
  --kg-radius-sm: 14px;

  --kg-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --kg-shadow-hover: 0 24px 60px rgba(15, 23, 42, .14);
}

/* =========================
   GLOBAL
========================= */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background: var(--kg-bg);
  color: var(--kg-text);
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  transition: all .3s ease;
}

p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

/* =========================
   BUTTONS
========================= */
.btn,
.kg-btn {
  border-radius: 14px;
  padding: 14px 28px;
  font-weight: 800;
  transition: all .25s ease;
}

.btn-success {
  background: var(--kg-accent);
  border: none;
  color: var(--kg-primary);
}

.btn-success:hover {
  background: var(--kg-accent-2);
  color: var(--kg-primary);
  transform: translateY(-2px);
}

/* =========================
   COMMON SECTION
========================= */
.kg-section {
  padding: 110px 0;
}

.kg-section--light {
  background: #fff;
}

.kg-section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 65px;
}

.kg-h2 {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--kg-primary);
  margin-bottom: 18px;
}

.kg-h3 {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--kg-primary);
  margin-bottom: 14px;
}

.kg-sub {
  color: var(--kg-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.kg-p {
  color: var(--kg-text);
  line-height: 1.8;
}

.kg-p-lg {
  font-size: 1.08rem;
  color: var(--kg-text);
}

/* =========================
   CARDS
========================= */
.kg-card,
.kg-step,
.kg-form-card,
.kg-cta-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  padding: 36px;
  box-shadow: var(--kg-shadow);
  height: 100%;
  transition: all .3s ease;
}

.kg-card:hover,
.kg-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--kg-shadow-hover);
}

.kg-icon,
.kg-step-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--kg-primary), var(--kg-primary-2));
  color: #fff;
  margin-bottom: 20px;
}

.kg-step-title {
  font-weight: 800;
  color: var(--kg-primary);
  margin-bottom: 10px;
}

.kg-step-text {
  color: var(--kg-text);
}

/* =========================
   IMAGE / VIDEO
========================= */
.kg-shot {
  border-radius: 26px;
  padding: 14px;
}

.kg-shot-img {
  width: 100%;
  border-radius: 18px;
}

video.kg-shot-img {
  height: 600px;
  object-fit: contain;
}

img.kg-shot-img {
  height: auto;
}

.kg-video-frame {
  overflow: hidden;
  border-radius: 18px;
}

/* =========================
   TRUST
========================= */
.kg-trust {
  padding: 110px 0;
  background: linear-gradient(135deg, var(--kg-primary), var(--kg-primary-2));
}

.kg-trust-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}

.kg-trust-head h2 {
  color: #fff;
  font-size: 2.3rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.kg-trust-head p {
  color: rgba(255, 255, 255, .82);
}

.kg-trust-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kg-trust-item {
  padding: 32px 24px;
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.kg-trust-ic {
  color: var(--kg-accent);
  margin-bottom: 16px;
}

.kg-trust-txt {
  color: #fff;
  font-weight: 700;
}

/* =========================
   HIGHLIGHT BOX
========================= */
.kg-highlight {
  padding: 22px;
  border-radius: 18px;
  margin-top: 18px;
  background: linear-gradient(135deg,
      rgba(64, 224, 208, .10),
      rgba(0, 245, 255, .08));
  border: 1px solid rgba(64, 224, 208, .16);
}

.kg-highlight-title {
  font-weight: 800;
  color: var(--kg-primary);
  margin-bottom: 8px;
}

.kg-highlight-text {
  color: var(--kg-text);
}

/* =========================
   CTA
========================= */
.kg-cta {
  padding: 110px 0;
  background:
    radial-gradient(circle at top left, rgba(64, 224, 208, .12), transparent 35%),
    linear-gradient(135deg, var(--kg-primary), var(--kg-primary-2));
}

.kg-cta-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}

.kg-cta-card .kg-h2 {
  color: #fff;
}

.kg-cta-bullets {
  margin-top: 28px;
}

.kg-cta-bullet {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.kg-cta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kg-accent);
  margin-top: 8px;
}

/* =========================
   FORM
========================= */
.kg-form input,
.kg-form textarea,
.kg-form select {
  width: 100%;
  min-height: 54px;
  border-radius: 14px;
  border: 1px solid var(--kg-line);
  padding: 14px 16px;
}

.kg-form textarea {
  min-height: 130px;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:991px) {

  .kg-h2,
  .kg-trust-head h2 {
    font-size: 1.8rem;
  }

  .kg-trust-inner {
    grid-template-columns: 1fr;
  }

  .kg-section,
  .kg-trust,
  .kg-cta {
    padding: 75px 0;
  }

  video.kg-shot-img {
    height: auto;
  }
}

@media(max-width:576px) {

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kg-h2 {
    font-size: 1.6rem;
  }
}


/* ===================== HERO BANNER ===================== */
.kg-hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.kg-hero-banner-img {
  width: 100%;
  height: auto;
  /* keeps natural image height */
  display: block;
}

/* button overlay */
.kg-hero-overlay {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 10%;
  display: flex;
  justify-content: flex-end;
  /* move to right */
  padding-right: 8%;
  /* slight inward spacing from edge */
}

.kg-hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.kg-hero-buttons .btn {
  padding: 14px 34px;
  border-radius: 50px;
  font-weight: 700;
}

/* mobile */
@media(max-width:576px) {
  .kg-hero-overlay {
    bottom: 6%;
  }

  .kg-hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .kg-hero-buttons .btn {
    width: 220px;
  }
}




/* api */

.kg-gdpr {
  padding: 90px 0;
  background: radial-gradient(circle at top, #f8fafc 0%, #ffffff 100%);
}

/* layout */
.kg-gdpr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* premium card */
.kg-gdpr-item {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  border: 1px solid rgba(26, 43, 76, 0.08);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

/* soft gradient glow */
.kg-gdpr-item::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #40E0D0, #00F5FF, #1A2B4C);
  opacity: 0;
  transition: 0.4s ease;
  z-index: 0;
  filter: blur(20px);
}

.kg-gdpr-item:hover::before {
  opacity: 0.25;
}

.kg-gdpr-item:hover {
  transform: translateY(-8px);
  border-color: rgba(64, 224, 208, 0.4);
}

/* text styling */
.kg-gdpr-title {
  font-size: 20px;
  font-weight: 800;
  color: #1A2B4C;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.kg-gdpr-text {
  font-size: 15px;
  color: #6b7280;
}

/* subtle divider line */
.kg-gdpr-item::after {
  content: "";
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #40E0D0, #00F5FF);
  display: block;
  margin: 12px auto 0;
  border-radius: 2px;
  opacity: 0.7;
}

/* responsive */
@media(max-width:768px) {
  .kg-gdpr-grid {
    grid-template-columns: 1fr;
  }
}