/* ======= Pro font for this section ======= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');

/* ======= Blue palette for feature tiles ======= */
:root{
  --blue:       #1f6dff;          /* primary blue */
  --blue-2:     #5aa0ff;          /* accent blue */
  --blue-soft:  #e9f2ff;          /* soft tint bg */
  --card-bg:    #ffffff;
  --card-br:    #eef2f6;
  --card-shadow:0 12px 26px rgba(16, 42, 67, .06);
}

/* About layout */
.about-wrap{ padding-block: 24px }
.about-title{
  text-align:center;
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 8px 0 18px;
  /* soft blue gradient ink */
  background: linear-gradient(90deg, #b7d8ff, #83c0ff 55%, #4ea6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback to gradient */
}

/* White cards grid */
.features-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  margin-top: 14px;
  align-items: stretch;            /* equal height rows */
}
.feature-card{
  grid-column: span 3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background: var(--card-bg);
  border: 1px solid var(--card-br);
  border-radius: 10px;             /* slightly crisp “cube-like” edges */
  padding: 22px 20px 24px;
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 220px;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16,42,67,.10);
  border-color: #e4ecf2;
}

/* ICON = perfect cube */
.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px; /* soft cube edges */
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #e8f4ff, #cce7ff 45%, #a6d4ff 90%);
  color: #0b4b8a;
  margin-bottom: 14px;
  outline: 1px solid rgba(31, 109, 255, 0.1);
  box-shadow: 0 4px 10px rgba(61, 165, 255, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-icon i { font-size: 26px }
.feature-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(61, 165, 255, 0.25);
}

/* Headings and copy (light blue theme + new font) */
.feature-card h3 {
  margin: 6px 0 8px;
  font: 800 18px/1.25 "Manrope", Inter, system-ui, sans-serif;
  background: linear-gradient(90deg, #cce7ff, #9fd3ff 50%, #5bb6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.feature-card p {
  margin: 0;
  color: #5a6b7f;
  line-height: 1.55;
  font-family: Inter, system-ui, sans-serif;
}
.feature-card h3 .step {
  color: #5bb6ff;
  margin-right: 6px;
}

/* Separator band */
.about-band {
  height: 44px;
  margin: 26px 0 6px;
  

  border-left: 0; border-right: 0;
}

/* Reveal-on-scroll: fades in when entering viewport, fades out when leaving */
.reveal-on-scroll{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;        /* smoother */
  visibility: hidden;                     /* avoid flash before JS runs */
}
.reveal-on-scroll.in{
  opacity: 1;
  transform: none;
  visibility: visible;
}
.reveal-on-scroll.out{
  opacity: 0;
  transform: translateY(18px);
  visibility: visible; /* remains flow-visible while animating out */
}

/* subtle stagger for the four tiles */
.features-grid .feature-card:nth-child(1){ transition-delay:.05s }
.features-grid .feature-card:nth-child(2){ transition-delay:.12s }
.features-grid .feature-card:nth-child(3){ transition-delay:.19s }
.features-grid .feature-card:nth-child(4){ transition-delay:.26s }

/* Responsive */
@media (max-width: 1024px){
  .feature-card{ grid-column: span 6 }
}
@media (max-width: 640px){
  .feature-card{ grid-column: span 12 }
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll,
  .reveal-on-scroll.in,
  .reveal-on-scroll.out{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}