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

/* ─── Hero ──────────────────────────────────────────────────────── */
.about-hero{padding:9.5rem 0 4.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 85% 0%,rgba(240,122,48,.13),transparent 60%),
    radial-gradient(700px 420px at -5% 100%,rgba(30,58,95,.06),transparent 55%),
    var(--bg)}
.about-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}
.about-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .95fr;gap:3.5rem;align-items:center}
.about-hero h1{margin:1.1rem 0 1.2rem;font-size:clamp(2rem,3.6vw,3rem)}
.about-hero .lead{font-size:1.1rem;color:var(--ink-2);line-height:1.75}

/* founder card */
.founder-card{background:var(--bg-card);border-radius:var(--r-lg);padding:2.25rem;border:1px solid var(--line);box-shadow:var(--shadow-md);position:relative}
.founder-card::before{content:'“';font-family:var(--font-display);font-size:5rem;line-height:.6;color:var(--brand-soft);position:absolute;top:1.75rem;right:1.5rem;pointer-events:none}
.founder-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#E05E14,#B14206);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;font-weight:700;color:#fff;margin-bottom:1.25rem;overflow:hidden;flex-shrink:0}
.founder-card h3{margin-bottom:.3rem;font-size:1.25rem}
.founder-role{font-size:.85rem;color:var(--brand-text);font-weight:600;margin-bottom:1rem}
.founder-quote{font-size:.94rem;color:var(--ink-2);line-height:1.75;font-style:italic}
.founder-tags{margin-top:1.5rem;display:flex;gap:.6rem;flex-wrap:wrap}
.founder-tag{font-size:.74rem;font-weight:600;color:var(--ink-2);background:var(--bg-warm);border:1px solid var(--line);border-radius:100px;padding:.3rem .8rem}

/* ─── Journey / timeline ────────────────────────────────────────── */
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.journey-grid .tag{margin-bottom:1rem;display:inline-flex}
.timeline{position:relative;padding-left:2rem;margin-top:2rem}
.timeline::before{content:'';position:absolute;left:0;top:.4rem;bottom:.4rem;width:2px;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
.tl-item{position:relative;padding-bottom:2.1rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-2.44rem;top:.3rem;width:14px;height:14px;border-radius:50%;background:var(--brand);border:3.5px solid var(--bg);box-shadow:0 0 0 1.5px var(--brand)}
.tl-date{font-size:.72rem;font-weight:700;color:var(--brand-text);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.tl-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.tl-body{font-size:.87rem;color:var(--ink-2);line-height:1.65}

/* values */
.values-stack{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.value-card{background:var(--bg-card);border-radius:var(--r);padding:1.5rem 1.6rem;border:1px solid var(--line);border-left:none;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.value-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.value-card h4{font-size:1rem;margin-bottom:.45rem;color:var(--ink);font-family:'Inter',sans-serif;font-weight:700}
.value-card p{font-size:.87rem;color:var(--ink-2);line-height:1.65}

/* ─── Company section ───────────────────────────────────────────── */
.company-section{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.company-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center}
.company-visual{display:flex;justify-content:center}
.company-visual dotlottie-player{width:420px;height:420px;max-width:100%;margin:-2rem 0;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(60,38,15,.12))}
.company-cards{display:flex;flex-direction:column;gap:1rem}
.company-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem;display:flex;gap:1.1rem;align-items:flex-start;transition:transform .25s ease,box-shadow .25s ease}
.company-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.company-card-icon{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.company-card-icon svg{width:22px;height:22px;color:var(--brand)}
.company-card h3{font-size:1rem;margin-bottom:.4rem;font-family:'Inter',sans-serif;font-weight:700}
.company-card p{font-size:.86rem;color:var(--ink-2);line-height:1.65}
.gst-note{display:flex;gap:.9rem;align-items:flex-start;margin-top:2.5rem;padding:1.25rem 1.5rem;background:var(--green-soft);border-radius:var(--r);border:1px solid #BFE8D2}
.gst-note svg{color:var(--green);flex-shrink:0;margin-top:2px}
.gst-note p{font-size:.88rem;color:#11603A;margin:0}
.gst-note strong{color:#0D4A2C}

/* ─── Made in India strip ───────────────────────────────────────── */
.india-strip{padding:4.5rem 0}
.india-strip-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;text-align:left}
.india-strip dotlottie-player{width:260px;height:260px;pointer-events:none;flex-shrink:0}
.india-strip-copy{max-width:460px}
.india-strip-copy h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.75rem}
.india-strip-copy p{font-size:.95rem;color:var(--ink-2)}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .about-hero{padding:8.5rem 0 3rem}
  .about-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .journey-grid{grid-template-columns:1fr;gap:3rem}
  .company-grid{grid-template-columns:1fr;gap:1.5rem}
  .company-visual dotlottie-player{width:340px;height:340px}
}
@media(max-width:768px){
  .about-hero{padding:7.5rem 0 2.5rem}
  .founder-card{padding:1.6rem}
  .india-strip-inner{flex-direction:column;gap:1rem;text-align:center}
  .india-strip dotlottie-player{width:220px;height:220px}
  .company-visual dotlottie-player{width:280px;height:280px;margin:-1.5rem 0}
}