/* ═══════════════════════════════════════════════════════════════
   PragatiCRM — Features page styles (loads after css/home.css)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────────────── */
.feat-hero{padding:9rem 0 3.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 85% 0%,rgba(240,122,48,.12),transparent 60%),
    radial-gradient(700px 420px at -5% 100%,rgba(30,58,95,.06),transparent 55%),
    var(--bg)}
.feat-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(60,38,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,38,15,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  pointer-events:none}
.feat-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center}
.feat-hero h1{margin:1.1rem 0 1.2rem;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.14}
.feat-hero-sub{font-size:1.1rem;color:var(--ink-2);max-width:540px;margin-bottom:1.9rem}
.feat-hero-stats{display:flex;gap:.6rem;flex-wrap:wrap}
.feat-hero-visual{display:flex;justify-content:center;align-items:center}
.feat-hero-visual dotlottie-player{width:640px;height:640px;max-width:100%;margin:-3.5rem 0;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(60,38,15,.14))}

/* ─── Jump nav ──────────────────────────────────────────────────── */
.jump-nav{position:sticky;top:70px;z-index:60;background:rgba(255,252,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.7rem 0}
.jump-nav-inner{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jump-nav-inner::-webkit-scrollbar{display:none}
.jump-chip{flex-shrink:0;font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--bg-card);border:1px solid var(--line);border-radius:100px;padding:.42rem 1rem;transition:color .2s ease,border-color .2s ease,background .2s ease;white-space:nowrap}
.jump-chip:hover{color:var(--brand-text);border-color:var(--brand);background:var(--brand-softer)}

/* ─── Highlight bento ───────────────────────────────────────────── */
.highlight-section{padding:4.5rem 0 3.5rem}
.highlight-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1.1rem;align-items:stretch}
.highlight-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column}
.highlight-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#F0C7A8}
.highlight-card.small{grid-column:span 3}
.highlight-kicker{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-text);margin-bottom:.7rem}
.highlight-card h3{font-size:1.1rem;margin-bottom:.6rem}
.highlight-card p{font-size:.88rem;color:var(--ink-2);line-height:1.65}
.highlight-icon{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;flex-shrink:0}
.highlight-icon svg{width:22px;height:22px;color:var(--brand)}
.highlight-card.featured{grid-column:span 4;grid-row:span 2;background:linear-gradient(170deg,#FFF7EF,#FFFDF9 60%);border:1.5px solid #F0B285;padding:2.1rem 2.1rem 1.25rem}
.highlight-card.featured h3{font-size:1.45rem}
.highlight-card.featured p{font-size:.92rem}
.highlight-card.featured dotlottie-player{width:320px;height:320px;max-width:100%;margin:auto auto 0;pointer-events:none}
.highlight-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:2rem}

/* ─── Module sections ───────────────────────────────────────────── */
.modules-wrap{padding:1rem 0 4.5rem}
.module-section{padding:3.75rem 0;border-bottom:1px solid var(--line);scroll-margin-top:150px}
.module-section:last-child{border-bottom:none}
.module-header{display:flex;align-items:center;gap:1.4rem;margin-bottom:2rem}
.module-lottie{width:112px;height:112px;border-radius:28px;background:var(--bg-card);border:1.5px solid var(--line-2);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.module-lottie dotlottie-player{width:96px;height:96px;pointer-events:none}
.module-header h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.3rem}
.module-header p{font-size:.92rem;color:var(--ink-2)}
.module-count{display:inline-block;font-size:.68rem;font-weight:700;color:var(--brand-text);background:var(--brand-soft);border-radius:100px;padding:.2rem .65rem;margin-left:.6rem;vertical-align:middle}

.feat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.feat-item{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--line);transition:border-color .2s ease,box-shadow .2s ease}
.feat-item:hover{border-color:#F0C7A8;box-shadow:var(--shadow-sm)}
.feat-item.upcoming{border-style:dashed;background:var(--bg-warm)}
.feat-check{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--green)}
.feat-item.upcoming .feat-check{color:var(--amber)}
.feat-text{font-size:.87rem;color:var(--ink);line-height:1.5}
.feat-text .coming{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--amber-soft);color:var(--amber);padding:.14rem .5rem;border-radius:100px;margin-left:.35rem;white-space:nowrap}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .feat-hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .feat-hero-visual{order:-1}
  .feat-hero-visual dotlottie-player{width:460px;height:460px;margin:-2.5rem 0}
  .highlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .highlight-card.featured{grid-column:span 2;grid-row:auto}
  .highlight-card.small{grid-column:span 1}
  .highlight-card.featured dotlottie-player{width:280px;height:280px;margin:1rem auto 0}
}
@media(max-width:768px){
  .feat-hero{padding:8rem 0 2.5rem}
  .feat-list{grid-template-columns:1fr}
  .module-header{flex-direction:column;align-items:flex-start;gap:1rem}
  .module-section{padding:2.75rem 0;scroll-margin-top:130px}
  .jump-nav{top:62px}
  .highlight-grid{grid-template-columns:1fr}
  .highlight-card.featured,.highlight-card.small{grid-column:auto;grid-row:auto}
  .highlight-card.featured dotlottie-player{width:250px;height:250px;margin:.75rem auto 0}
  .feat-hero-visual dotlottie-player{width:360px;height:360px;margin:-1.75rem 0}
}
@media(max-width:480px){
  .feat-hero-visual dotlottie-player{width:300px;height:300px;margin:-1.25rem 0}
  .module-lottie{width:96px;height:96px;border-radius:24px}
  .module-lottie dotlottie-player{width:82px;height:82px}
}