/* ============================================================
   Tanzania Tech Media - Agency Mode home (company + technology focused)
   Full-bleed. Loads with service-detail.css + about.css.
   ============================================================ */
.ttm-ah{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }
:root{ --ttm-accent: var(--tp-theme-primary, #13DB31); }

/* full-screen (edge to edge) */
.ttm-ah .ttm-container{ max-width:1320px; padding:0 48px; }
.ttm-ah .ttm-svc-cta{ margin:0; border-radius:0; }
.ttm-ah .ttm-svc-cta .ttm-container{ max-width:840px; }
@media (max-width:1199px){ .ttm-ah .ttm-container{ padding:0 32px; } }
@media (max-width:575px){ .ttm-ah .ttm-container{ padding:0 18px; } }

/* shared centered head */
.ttm-ah-head{ text-align:center; max-width:660px; margin:0 auto 56px; }
.ttm-ah-head .ttm-eyebrow{ justify-content:center; }
.ttm-ah-head h2{ font-size:clamp(30px,4.2vw,46px); font-weight:700; color:var(--ttm-ink); margin:14px 0 14px; letter-spacing:-.5px; }
.ttm-ah-head p{ font-size:17px; line-height:1.6; color:var(--ttm-muted); margin:0; }

/* ---------- HERO (asymmetric, premium) ---------- */
.ttm-ah-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:160px 0 96px; }
.ttm-ah-hero::after{ content:""; position:absolute; top:-15%; left:-8%; width:620px; height:620px; border-radius:50%;
   background:radial-gradient(closest-side, color-mix(in srgb, var(--ttm-accent) 38%, transparent), transparent 70%); opacity:.22; pointer-events:none; }
.ttm-ah-hero .ttm-shape{ position:absolute; pointer-events:none; }
.ttm-ah-hero .ttm-shape-1{ top:70px; left:-30px; color:var(--ttm-accent); opacity:.13; }
.ttm-ah-herogrid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center; }
.ttm-ah-eyebrow{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--ttm-line); padding:9px 18px; border-radius:50px;
   font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ttm-ink); margin-bottom:26px; box-shadow:0 10px 26px -18px rgba(17,16,19,.4); }
.ttm-ah-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--ttm-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--ttm-accent) 24%, transparent); }
.ttm-ah-hero h1{ font-size:clamp(46px,6vw,86px); line-height:.96; font-weight:800; color:var(--ttm-ink); letter-spacing:-2.5px; margin:0 0 22px; }
.ttm-ah-hero h1 .ac{ color:var(--ttm-accent); }
.ttm-ah-hero .sub{ font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--ttm-muted); max-width:540px; margin:0 0 34px; }
.ttm-ah-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.ttm-ah-trust{ margin-top:50px; padding-top:42px; border-top:1px solid var(--ttm-line); display:flex; gap:48px; flex-wrap:wrap; }
.ttm-ah-trust .n{ font-size:clamp(26px,2.6vw,38px); font-weight:800; color:var(--ttm-ink); letter-spacing:-1px; line-height:1; }
.ttm-ah-trust .n span{ color:var(--ttm-accent); }
.ttm-ah-trust .l{ font-size:13.5px; color:var(--ttm-muted); margin-top:9px; }

/* hero network-hub graphic */
.ttm-ah-viz{ position:relative; width:100%; max-width:520px; aspect-ratio:1; margin:0 auto; }
.ttm-ah-viz .orbit{ position:absolute; border-radius:50%; }
.ttm-ah-viz .o1{ inset:4%; border:1.5px dashed #d3d8cb; }
.ttm-ah-viz .o2{ inset:23%; border:1.5px dashed color-mix(in srgb, var(--ttm-accent) 45%, #d3d8cb); }
.ttm-ah-viz .dot-acc{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--ttm-accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--ttm-accent) 20%, transparent); }
.ttm-ah-viz .da1{ top:23%; left:50%; transform:translate(-50%,-50%); }
.ttm-ah-viz .da2{ top:50%; left:77%; transform:translate(-50%,-50%); }
.ttm-ah-viz .da3{ top:77%; left:50%; transform:translate(-50%,-50%); }
.ttm-ah-viz .da4{ top:50%; left:23%; transform:translate(-50%,-50%); }
.ttm-ah-viz .hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:124px; height:124px; border-radius:32px;
   background:var(--ttm-accent); display:flex; align-items:center; justify-content:center; box-shadow:0 34px 64px -22px color-mix(in srgb, var(--ttm-accent) 65%, transparent); }
.ttm-ah-viz .hub::before{ content:""; position:absolute; inset:-12px; border-radius:42px; border:2px solid color-mix(in srgb, var(--ttm-accent) 40%, transparent); }
.ttm-ah-viz .hub svg{ width:56px; height:56px; color:#0a1f0d; }
.ttm-ah-viz .node{ position:absolute; width:78px; height:78px; border-radius:22px; background:#fff; border:1px solid var(--ttm-line);
   display:flex; align-items:center; justify-content:center; box-shadow:0 24px 44px -24px rgba(17,16,19,.34); }
.ttm-ah-viz .node svg{ width:32px; height:32px; color:var(--ttm-ink); }
.ttm-ah-viz .node.dark{ background:#111013; border-color:#111013; }
.ttm-ah-viz .node.dark svg{ color:var(--ttm-accent); }
.ttm-ah-viz .n1{ top:4%; left:50%; transform:translate(-50%,-50%); }
.ttm-ah-viz .n2{ top:50%; left:96%; transform:translate(-50%,-50%); }
.ttm-ah-viz .n3{ top:96%; left:50%; transform:translate(-50%,-50%); }
.ttm-ah-viz .n4{ top:50%; left:4%; transform:translate(-50%,-50%); }

@media (max-width:991px){
  .ttm-ah-herogrid{ grid-template-columns:1fr; gap:50px; }
  .ttm-ah-viz{ max-width:420px; order:-1; }
  .ttm-ah-trust{ justify-content:flex-start; }
}
@media (max-width:575px){
  .ttm-ah-viz{ max-width:300px; }
  .ttm-ah-viz .hub{ width:96px; height:96px; border-radius:26px; }
  .ttm-ah-viz .hub svg{ width:42px; height:42px; }
  .ttm-ah-viz .node{ width:60px; height:60px; border-radius:18px; }
  .ttm-ah-viz .node svg{ width:26px; height:26px; }
}

/* ---------- WHAT WE DO (reuses .ttm-svc-highlights) ---------- */

/* ---------- AI / TECHNOLOGY (dark) ---------- */
.ttm-ai{ background:#0e1411; padding:104px 0; }
.ttm-ai-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.ttm-ai .ttm-eyebrow{ color:#fff; }
.ttm-ai h2{ font-size:clamp(30px,4vw,46px); font-weight:700; color:#fff; margin:14px 0 18px; letter-spacing:-.5px; }
.ttm-ai .lead{ font-size:17px; line-height:1.7; color:#c4c8be; margin:0; }
.ttm-ai-feats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ttm-ai-feat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:26px 24px; }
.ttm-ai-feat .ico{ width:46px; height:46px; border-radius:12px; background:color-mix(in srgb, var(--ttm-accent) 18%, transparent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ttm-ai-feat .ico svg{ width:24px; height:24px; color:var(--ttm-accent); }
.ttm-ai-feat h4{ font-size:17px; font-weight:700; color:#fff; margin:0 0 7px; }
.ttm-ai-feat p{ font-size:13.5px; line-height:1.55; color:#a9aea3; margin:0; }
.ttm-ai-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:70px; padding-top:52px; border-top:1px solid rgba(255,255,255,.1); }
.ttm-ai-stat{ text-align:center; }
.ttm-ai-stat .num{ font-size:clamp(30px,3.4vw,44px); font-weight:800; color:var(--ttm-accent); letter-spacing:-1px; line-height:1; }
.ttm-ai-stat .lbl{ font-size:14px; color:#c4c8be; margin-top:9px; }

/* ---------- WHO WE ARE (soft) ---------- */
.ttm-ah-about{ background:var(--ttm-soft); padding:104px 0; }
.ttm-ah-about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; }
.ttm-ah-about h2{ font-size:clamp(28px,3.8vw,42px); font-weight:700; color:var(--ttm-ink); margin:14px 0 0; letter-spacing:-.5px; }
.ttm-ah-about .body{ font-size:16.5px; line-height:1.85; color:#33372f; }
.ttm-ah-about .body p{ margin:0 0 18px; }
.ttm-ah-about .body .ttm-btn{ margin-top:8px; }

@media (max-width:991px){
  .ttm-ai-grid, .ttm-ah-about-grid{ grid-template-columns:1fr; gap:44px; }
  .ttm-ai-stats{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:575px){
  .ttm-ah-trust{ gap:30px; }
  .ttm-ai-feats{ grid-template-columns:1fr; }
}