/* css/knowmore.css
   Know More section — left media, right content, dark bg (#0D1E32), responsive
   Assumes Inter font already loaded.
*/
:root{
  --km-bg: #0D1E32 !important;
  --km-fg: #ffffff;
  --km-muted: rgba(255,255,255,0.78);
  --km-accent: #7c5cff;
  --km-cta: linear-gradient(90deg, #0d9aff, #3F5FFF);
  --card-radius: 14px;
  --maxw: 1200px;
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Section */
.knowmore-section{
  background: var(--km-bg) !important;
  color: var(--km-fg);
  padding: 64px 20px;
  font-family: var(--ff);
  position: relative;
  overflow: hidden;
}
.knowmore-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

/* On small screens stack vertically */
@media (max-width: 880px){
  .knowmore-inner{
    grid-template-columns: 1fr;
  }
}

/* Left media area */
.knowmore-media{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height: 320px;
}

/* Lottie container */
.knowmore-lottie{
  width:100%;
  max-width: 540px;
  height: 320px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(3,8,20,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.9,.26,1), opacity .5s ease;
}

/* fallback image */
.knowmore-fallback{
  position:absolute;
  max-width: 520px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(3,8,20,0.6);
  display:block;
}

/* When animated in, JS adds .is-visible to fade it up */
.knowmore-lottie.is-visible{ transform: translateY(0); opacity: 1; }

/* Right content area */
.knowmore-content{
  color:var(--km-fg);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Header */
.knowmore-head h2{
  margin:0; font-size:28px; font-weight:800; letter-spacing:-0.02em; color:var(--km-fg);
}
.knowmore-sub{
  margin:8px 0 0; color:var(--km-muted); font-size:15px; max-width:620px;
}

/* Body text */
.knowmore-body p{
  margin: 0 0 10px 0;
  color:var(--km-fg);
  font-size:15px;
  line-height:1.7;
  max-width: 720px;
}
.knowmore-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--km-fg);
  list-style: none;
}
.knowmore-list li{
  position:relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--km-fg);
  font-weight:600;
  font-size:14px;
}
.knowmore-list li::before{
  content: "";
  width:10px; height:10px;
  background: var(--km-cta);
  border-radius:2px;
  position:absolute; left:6px; top:7px;
  box-shadow: 0 6px 18px rgba(61,95,255,0.12);
}

/* CTAs */
.knowmore-cta{
  margin-top: 12px;
  display:flex;
  gap:12px;
  align-items:center;
}
.btn-know{
  display:inline-block;
  padding:14px 36px;
  border-radius:28px;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  color:#fff;
  background: var(--km-cta);
  box-shadow: 0 14px 40px rgba(13,154,255,0.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-know:hover{ transform: translateY(-4px); box-shadow: 0 20px 50px rgba(13,154,255,0.18); }

.btn-ghost{
  background: transparent;
  color: var(--km-fg);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 24px;
  border-radius: 20px;
  font-weight:700;
}

/* Small screens: center image above content */
@media (max-width:880px){
  .knowmore-media{ order: 0; min-height: 220px; }
  .knowmore-fallback{ max-width: 420px; }
  .knowmore-content{ order: 1; }
  .knowmore-inner{ gap:24px; }
}

/* Accessibility focus */
.btn-know:focus, .btn-ghost:focus{ outline: 4px solid rgba(124,92,255,0.12); outline-offset:4px; }

/* Utility: subtle decorative gradient overlaid */
.knowmore-section::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(800px 160px at 10% 10%, rgba(124,92,255,0.06), transparent 12%),
              radial-gradient(600px 120px at 90% 80%, rgba(52,72,197,0.04), transparent 12%);
  opacity: 0.95;
}