/* Feature Detail Pages — Premium SaaS Styles */
/* Shared by all 10 feature pages */

/* BREADCRUMB */
.breadcrumb{padding:12px 0;font-size:12px;color:var(--t3)}
.breadcrumb a{color:var(--p);text-decoration:none;transition:.3s}.breadcrumb a:hover{color:var(--pk)}
.breadcrumb span{margin:0 6px;color:var(--b)}

/* FEATURE HERO */
.feat-hero{padding:120px 0 60px;background:var(--gr2);position:relative;overflow:hidden}
.feat-hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.06) 0%,transparent 70%);animation:orbFloat 15s ease-in-out infinite}
.feat-hero::after{content:'';position:absolute;bottom:-150px;left:-150px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.05) 0%,transparent 70%);animation:orbFloat 18s ease-in-out infinite reverse}
.feat-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feat-hero-content{position:relative;z-index:2}
.feat-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.15);border-radius:50px;padding:6px 16px;font-size:12px;font-weight:600;color:var(--p);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:20px}
.feat-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:pulse2 2s ease-in-out infinite}
.feat-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:44px;font-weight:800;line-height:1.15;color:var(--t);margin-bottom:16px}
.feat-hero h1 .hl{background:var(--gr);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.feat-hero .sub{font-size:17px;color:var(--t2);line-height:1.7;margin-bottom:28px;max-width:520px}
.feat-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.feat-hero-img{position:relative;z-index:2}
.feat-hero-img img{width:100%;border-radius:var(--r2);box-shadow:0 30px 80px rgba(124,58,237,.18);transition:.6s ease;animation:heroZoomIn 1s ease-out forwards,heroFloat 5s ease-in-out 1s infinite;transform-origin:center center;max-height:450px;object-fit:contain}
.feat-hero-img img:hover{transform:scale(1.04) translateY(-6px);box-shadow:0 40px 100px rgba(124,58,237,.25)}

/* PROBLEM / WHY SECTION */
.why-sec{padding:72px 0;background:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:36px}
.why-text h3{font-family:'Plus Jakarta Sans';font-size:28px;font-weight:700;margin-bottom:14px;color:var(--t)}
.why-text p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.pain-cards{display:flex;flex-direction:column;gap:14px}
.pain-card{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#FEF2F2;border:1px solid #FECACA;border-radius:14px;transition:.3s}
.pain-card:hover{transform:translateX(6px);box-shadow:0 4px 16px rgba(239,68,68,.08)}
.pain-ic{width:36px;height:36px;border-radius:10px;background:#FEE2E2;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pain-card h4{font-size:14px;font-weight:700;color:#DC2626;margin-bottom:2px}
.pain-card p{font-size:12px;color:#991B1B;line-height:1.5;margin:0}

/* CAPABILITIES GRID */
.cap-sec{padding:72px 0;background:var(--bg)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.cap-card{background:#fff;border:1px solid var(--b);border-radius:18px;padding:28px 24px;transition:.4s;position:relative;overflow:hidden}
.cap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gr);transform:scaleX(0);transform-origin:left;transition:.4s}
.cap-card:hover{transform:translateY(-6px);box-shadow:var(--sh3);border-color:transparent}
.cap-card:hover::before{transform:scaleX(1)}
.cap-ic{width:48px;height:48px;border-radius:14px;background:var(--pl);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:.3s}
.cap-card:hover .cap-ic{background:var(--gr)}
.cap-card:hover .cap-ic svg{filter:brightness(10)}
.cap-card h4{font-family:'Plus Jakarta Sans';font-size:16px;font-weight:700;margin-bottom:6px;color:var(--t)}
.cap-card p{font-size:15px;color:var(--t2);line-height:1.6}

/* HOW IT WORKS */
.how-sec{padding:72px 0;background:#fff}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;position:relative}
.how-steps::before{content:'';position:absolute;top:42px;left:15%;right:15%;height:2px;background:linear-gradient(90deg,var(--p),var(--a),var(--pk));border-radius:2px}
.how-step{text-align:center;position:relative;padding:0 20px}
.step-num{width:84px;height:84px;border-radius:50%;background:var(--gr);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;color:#fff;box-shadow:0 8px 30px rgba(124,58,237,.25);position:relative;z-index:2}
.how-step h4{font-family:'Plus Jakarta Sans';font-size:18px;font-weight:700;margin-bottom:8px;color:var(--t)}
.how-step p{font-size:13px;color:var(--t2);line-height:1.6;max-width:280px;margin:0 auto}

/* USE CASES */
.use-sec{padding:72px 0;background:var(--bg)}
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.use-card{background:#fff;border:1px solid var(--b);border-radius:14px;padding:22px 18px;text-align:center;transition:.4s}
.use-card:hover{transform:translateY(-4px);box-shadow:var(--sh3);border-color:var(--p)}
.use-ic{width:48px;height:48px;border-radius:14px;background:var(--pl);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:.3s}
.use-card:hover .use-ic{background:var(--gr)}
.use-card:hover .use-ic svg{filter:brightness(10)}
.use-card h4{font-size:14px;font-weight:700;color:var(--t);margin-bottom:4px}
.use-card p{font-size:11px;color:var(--t2);line-height:1.5}

/* RELATED FEATURES */
.rel-sec{padding:72px 0;background:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.rel-card{background:#fff;border:1px solid var(--b);border-radius:18px;padding:28px;transition:.4s;text-decoration:none;display:block}
.rel-card:hover{transform:translateY(-6px);box-shadow:var(--sh3);border-color:var(--p)}
.rel-card .rel-ic{width:48px;height:48px;border-radius:14px;background:var(--pl);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rel-card h4{font-family:'Plus Jakarta Sans';font-size:16px;font-weight:700;color:var(--t);margin-bottom:6px}
.rel-card p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:12px}
.rel-link{font-size:13px;font-weight:600;color:var(--p);display:flex;align-items:center;gap:4px}

/* FEATURE FAQ */
.feat-faq{padding:72px 0;background:var(--bg)}

/* FEATURE CTA */
.feat-cta{padding:72px 0;background:var(--gr);text-align:center;position:relative;overflow:hidden}
.feat-cta::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.04);top:-180px;right:-180px;animation:orbFloat 10s ease-in-out infinite}
.feat-cta h2{font-family:'Plus Jakarta Sans';font-size:36px;font-weight:800;color:#fff;margin-bottom:14px;position:relative;z-index:2}
.feat-cta p{font-size:16px;color:rgba(255,255,255,.8);margin-bottom:28px;position:relative;z-index:2}
.feat-cta .cta-btns{position:relative;z-index:2}

/* RESPONSIVE */

/* 4th related feature: hide on desktop, show on mobile 2x2 */
.rel-grid .rel-card:nth-child(4){display:none}
@media(max-width:1023px){
  .rel-grid .rel-card:nth-child(4){display:block}

  .feat-hero .wrap{grid-template-columns:1fr;text-align:center}
  .feat-hero h1{font-size:32px}
  .feat-hero .sub{margin:0 auto 28px;max-width:100%}
  .feat-hero-btns{justify-content:center}
  .feat-hero-img{max-width:100%;margin:20px auto 0}.feat-hero-img img{max-width:100% !important}
  .cap-grid{grid-template-columns:1fr 1fr}
  .how-steps{grid-template-columns:1fr;gap:28px}
  .how-steps::before{display:none}
  .use-grid{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:639px){
  .feat-hero{padding:100px 0 40px}
  .feat-hero h1{font-size:26px}
  .cap-grid,.use-grid{grid-template-columns:1fr 1fr}
  .feat-cta h2{font-size:24px}
}

@keyframes heroZoomIn{0%{opacity:0;transform:scale(0.9) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.01)}}