/* features.css — Section 3: Ready + Section 4: Capabilities + Section 5: For Who */

/* =========================================================
   READY — everything works now (light theme, green accents)
   ========================================================= */
.sec-ready {
  background: linear-gradient(180deg, #fff 0%, #f8f5ff 100%);
  padding: 100px 20px; position: relative; overflow: hidden;
}
.sec-ready .inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.sec-ready .sec-label {
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: #10b981; margin-bottom: 10px; font-weight: 700;
}
.sec-ready h2 {
  font-size: clamp(30px, 5vw, 44px); font-weight: 800;
  color: #111; margin-bottom: 8px;
}
.sec-ready .desc { color: #666; font-size: 16px; line-height: 1.7; margin-bottom: 48px; max-width: 500px; margin-left: auto; margin-right: auto; }

.ready-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
@media (max-width: 700px) { .ready-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ready-grid { grid-template-columns: 1fr; } }

.ready-item {
  padding: 24px 20px; border-radius: 16px;
  background: #fff;
  border: 1px solid #e8e0f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.35s;
}
.ready-item:hover {
  border-color: rgba(16,185,129,0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(16,185,129,0.1);
}

.ready-icon {
  width: 40px; height: 40px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,0.1); border-radius: 10px;
}
.ready-icon svg { width: 22px; height: 22px; stroke: #10b981; }

.ready-label { font-weight: 700; font-size: 15px; color: #222; margin-bottom: 6px; }
.ready-desc { font-size: 13px; color: #888; line-height: 1.55; margin-bottom: 12px; }

.ready-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  color: #10b981; text-transform: uppercase;
}
.ready-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
  animation: readyPulse 2s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(16,185,129,0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 4px rgba(16,185,129,0.3); }
}

/* =========================================================
   CAPABILITIES — colorful cards
   ========================================================= */
.sec-caps {
  background: linear-gradient(180deg, #f8f5ff 0%, #f5f0ff 100%);
  padding: 100px 20px;
}
.sec-caps .inner { max-width: 1100px; margin: 0 auto; }
.sec-caps .sec-label {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 10px; font-weight: 700;
}
.sec-caps h2 {
  font-size: clamp(28px, 5vw, 40px); font-weight: 800;
  color: #111; margin-bottom: 8px;
}
.sec-caps .desc { color: #666; font-size: 16px; line-height: 1.7; margin-bottom: 36px; max-width: 500px; }

.cards-3d { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .cards-3d { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cards-3d { grid-template-columns: 1fr; } }
.card-3d { perspective: 800px; }
.card-3d-inner {
  padding: 28px 20px; border-radius: 18px; border: 1px solid #e8e0f0;
  background: #fff; transition: all 0.4s; transform-style: preserve-3d;
  text-align: center; min-height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.card-3d:hover .card-3d-inner { box-shadow: 0 16px 50px rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.2); }
.card-icon { font-size: 34px; margin-bottom: 10px; }
.card-t { font-weight: 700; font-size: 16px; color: #222; margin-bottom: 6px; }
.card-d { font-size: 13px; color: #888; line-height: 1.5; }

/* =========================================================
   FOR WHO — with emoji cards
   ========================================================= */
.sec-who {
  background: linear-gradient(180deg, #f5f0ff 0%, #ede5ff 100%);
  padding: 100px 20px;
}
.sec-who .inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.sec-who .sec-label {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 10px; font-weight: 700;
}
.sec-who h2 {
  font-size: clamp(26px, 5vw, 38px); font-weight: 800;
  color: #111; margin-bottom: 40px; line-height: 1.3;
}
.who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
@media (max-width: 700px) { .who-grid { grid-template-columns: 1fr; } }
.who-card {
  padding: 32px 24px; border-radius: 20px;
  background: #fff; border: 1px solid #e8e0f0;
  box-shadow: 0 4px 20px rgba(139,92,246,0.06);
  transition: all 0.35s;
}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.25);
}
.who-emoji { font-size: 40px; margin-bottom: 16px; }
.who-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 8px; }
.who-text { font-size: 14px; color: #666; line-height: 1.65; }