/* ============================================================
   Tanzania Tech Media - About page (professional, no photos)
   Loads alongside service-detail.css (shared .ttm-btn, .ttm-eyebrow,
   .ttm-container, .ttm-svc-highlights, .ttm-svc-cta).
   ============================================================ */
.ttm-about{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }
:root{ --ttm-accent: var(--tp-theme-primary, #13DB31); }

/* hero */
.ttm-about-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:175px 0 90px; border-bottom:1px solid var(--ttm-line); text-align:center; }
.ttm-about-hero .ttm-shape{ position:absolute; pointer-events:none; }
.ttm-about-hero .ttm-shape-1{ top:80px; left:-40px; color:var(--ttm-accent); opacity:.16; }
.ttm-about-hero .ttm-shape-2{ bottom:-40px; right:-30px; color:#111013; opacity:.05; }
.ttm-about-hero .ttm-eyebrow{ justify-content:center; }
.ttm-about-hero h1{ font-size:clamp(36px,5.5vw,60px); line-height:1.05; font-weight:700; color:var(--ttm-ink); margin:16px auto 20px; letter-spacing:-1px; max-width:920px; }
.ttm-about-hero p{ font-size:19px; line-height:1.6; color:var(--ttm-muted); max-width:740px; margin:0 auto 32px; }
.ttm-about-hero .ttm-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* story */
.ttm-story{ background:#fff; padding:90px 0; }
.ttm-story-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.ttm-story-grid h2{ font-size:clamp(28px,3.6vw,40px); font-weight:700; color:var(--ttm-ink); margin:14px 0 0; letter-spacing:-.5px; }
.ttm-story-body{ font-size:16.5px; line-height:1.85; color:#33372f; }
.ttm-story-body p{ margin:0 0 18px; }
.ttm-story-body p:last-child{ margin:0; }

/* stats band */
.ttm-stats{ background:#111013; padding:64px 0; }
.ttm-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ttm-stat{ text-align:center; color:#fff; }
.ttm-stat .num{ font-size:clamp(32px,4vw,46px); font-weight:800; color:var(--ttm-accent); line-height:1; letter-spacing:-1px; }
.ttm-stat .lbl{ font-size:15px; color:#c4c8be; margin-top:10px; }

/* pillars */
.ttm-pillars{ background:#fff; padding:20px 0 90px; }
.ttm-pillars-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ttm-pillar{ border:1px solid var(--ttm-line); border-radius:20px; padding:40px; transition:.25s ease; }
.ttm-pillar:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(17,16,19,.3); border-color:transparent; }
.ttm-pillar .ico{ width:60px; height:60px; border-radius:15px; background:var(--ttm-soft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.ttm-pillar .ico svg{ width:30px; height:30px; color:var(--ttm-accent); }
.ttm-pillar h3{ font-size:23px; font-weight:700; color:var(--ttm-ink); margin:0 0 12px; }
.ttm-pillar p{ font-size:15.5px; line-height:1.7; color:var(--ttm-muted); margin:0 0 18px; }
.ttm-pillar a.more{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ttm-ink); text-decoration:none; }
.ttm-pillar a.more svg{ width:14px; height:14px; color:var(--ttm-accent); transition:.2s ease; }
.ttm-pillar a.more:hover svg{ transform:translateX(4px); }

/* process */
.ttm-process{ background:var(--ttm-soft); padding:90px 0; border-top:1px solid var(--ttm-line); }
.ttm-proc-head{ text-align:center; max-width:620px; margin:0 auto 50px; }
.ttm-proc-head h2{ font-size:clamp(28px,3.8vw,40px); font-weight:700; color:var(--ttm-ink); margin:14px 0 0; letter-spacing:-.5px; }
.ttm-proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ttm-proc-card{ background:#fff; border:1px solid var(--ttm-line); border-radius:16px; padding:30px 26px; }
.ttm-proc-num{ width:44px; height:44px; border-radius:12px; background:var(--ttm-accent); color:#0a1f0d; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ttm-proc-card h3{ font-size:18px; font-weight:700; color:var(--ttm-ink); margin:0 0 10px; }
.ttm-proc-card p{ font-size:14.5px; line-height:1.65; color:var(--ttm-muted); margin:0; }

@media (max-width:991px){
  .ttm-story-grid{ grid-template-columns:1fr; gap:24px; }
  .ttm-stats-grid, .ttm-proc-grid{ grid-template-columns:1fr 1fr; }
  .ttm-pillars-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .ttm-stats-grid, .ttm-proc-grid{ grid-template-columns:1fr; } }