/* ================================
   ABOUT PAGE (scoped)
   ================================ */

#about .section { padding: clamp(48px, 6vw, 96px) 20px; }

/* 1) HERO */
.ab-hero .ab-hero-inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(16px, 3vw, 40px);
  align-items:center; max-width:1200px; margin:0 auto;
}
.ab-hero h1{
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 900; letter-spacing: -.02em; margin: 0 0 10px;
}
.ab-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius:10px; background:#7D5BA6; color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 8px 20px rgba(125,91,166,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{
  display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:700; color:#7D5BA6; border:2px solid #7D5BA6;
}

/* plant motif */
.ab-hero-visual{ display:flex; justify-content:center; align-items:center; }
.plant{ position:relative; width:min(420px, 90%); height:280px; }
.plant .seed, .sprout, .leaf, .tree{ position:absolute; bottom:18px; left:20px; right:20px; margin:auto; }
.seed{ width:10px; height:10px; background:#7D5BA6; border-radius:50%; bottom:24px; }
.sprout{ width:2px; height:60px; background:#CDB7E3; left:50%; transform:translateX(-50%); border-radius:2px; }
.leaf{ width:72px; height:24px; border-radius:24px; background:#A686D6; left: calc(50% + 10px); bottom: 84px; }
.tree{ width:8px; height:160px; background:#7D5BA6; left:58%; border-radius:6px; bottom: 24px; box-shadow: 0 14px 32px rgba(0,0,0,.12); }

/* 2) WHO WE BUILD FOR */
.ab-who{ background:#fafafa; }
.ab-who h2, .ab-what h2, .ab-how h2, .ab-stack h2, .ab-grow h2{
  font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0 0 10px;
}
.ab-who .sub, .ab-what .sub{ color:#6b7280; margin:0 0 26px; }
.ab-cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 26px);
  max-width:1200px; margin:0 auto;
}

/* Base card */
.ab-card{
  --bg:#fff; --bd:#eee; --fg:#111; --chipbg:#F2EDFF; --chipfg:#6F55AD;
  background: var(--bg); border:1px solid var(--bd); border-radius:14px; padding:20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.ab-card h3{ margin:2px 0 8px; font-weight:800; color:var(--fg); }
.ab-card .chip{
  display:inline-block; font-size:12px; font-weight:800; color:var(--chipfg); background:var(--chipbg);
  padding:6px 10px; border-radius:999px; margin-bottom: 8px;
}
.ab-card ul{ margin:10px 0 0 18px; padding:0; color:#444; line-height:1.7; }

/* Card themes */
.ab-card1{
  --bg: linear-gradient(180deg,#FFFBEB 0%,#FFF7ED 100%);
  --bd: #FDE68A; --fg:#B45309; --chipbg:#FEF3C7; --chipfg:#B45309;
}
.ab-card2{
  --bg: linear-gradient(180deg,#F0FDF4 0%,#ECFDF5 100%);
  --bd: #A7F3D0; --fg:#166534; --chipbg:#D1FAE5; --chipfg:#065F46;
}
.ab-card3{
  --bg: linear-gradient(180deg,#ECFEFF 0%,#EFF6FF 100%);
  --bd: #93C5FD; --fg:#0E7490; --chipbg:#DBEAFE; --chipfg:#1D4ED8;
}

/* 3) WHAT WE BUILD */
.ab-what .ab-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 26px);
  max-width:1200px; margin:0 auto;
}

/* Base tile */
.ab-tile{
  --bg:#fff; --bd:#eee; --fg:#111; --muted:#555; --sub:#6b7280;
  background: var(--bg); border:1px solid var(--bd); border-radius:14px; padding:18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.ab-tile h4{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--fg); }
.ab-tile p{ margin:0 0 6px; color:var(--muted); }
.ab-tile span{ color:var(--sub); font-size:14px; }

/* Tile themes */
.ab-tile1{ --bg:linear-gradient(180deg,#FFF7ED 0%,#FFFBEB 100%); --bd:#FCD34D; --fg:#D97706; --muted:#6B4E16; }
.ab-tile2{ --bg:linear-gradient(180deg,#ECFDF5 0%,#F0FDF4 100%); --bd:#86EFAC; --fg:#16A34A; --muted:#14532D; }
.ab-tile3{ --bg:linear-gradient(180deg,#FFE4E6 0%,#FFF1F2 100%); --bd:#FDA4AF; --fg:#E11D48; --muted:#7F1D1D; }
.ab-tile4{ --bg:linear-gradient(180deg,#E0F2FE 0%,#ECFEFF 100%); --bd:#93C5FD; --fg:#0EA5E9; --muted:#0C4A6E; }
.ab-tile5{ --bg:linear-gradient(180deg,#F5F3FF 0%,#EEF2FF 100%); --bd:#C4B5FD; --fg:#7C3AED; --muted:#3730A3; }
.ab-tile6{ --bg:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%); --bd:#CBD5E1; --fg:#0F172A; --muted:#334155; }

/* 4) HOW WE WORK (4D) */
.ab-how .ab-steps{
  max-width:1000px; margin:0 auto; display:grid; gap:14px;
}
.step{
  --ring:#eee; --badge:#7D5BA6;
  display:grid; grid-template-columns: 60px 1fr; gap:14px;
  align-items:center; padding:16px; border-radius:12px; border:1px solid var(--ring); background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.badge{
  width:60px; height:60px; border-radius:12px; background:var(--badge); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;
}

/* Step themes */
.stepreveal1{ --ring:#FCD34D; --badge:#F59E0B; }
.stepreveal2{ --ring:#86EFAC; --badge:#16A34A; }
.stepreveal3{ --ring:#FDA4AF; --badge:#E11D48; }
.stepreveal4{ --ring:#93C5FD; --badge:#0EA5E9; }

/* 5) STACK TABLE */
.table-wrap{ overflow:auto; }
.stack-table{
  width:100%; border-collapse:collapse; min-width:720px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.stack-table thead th{
  text-align:left; background:#F7F5FC; color:#6F55AD; padding:14px; font-weight:900; font-size:14px;
}
.stack-table td{ padding:14px; border-top:1px solid #eee; }

/* 6) GROW SECTION */
.ab-grow{ background:#fafafa; }
.grow-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 16px 42px rgba(0,0,0,.08); max-width:1000px; margin:0 auto;
}
.grow-line{
  position:relative; height:4px; background:#EDE7F6; border-radius:999px; margin:16px 0 18px;
}
.grow-line span{
  position:absolute; top:-10px; width:12px; height:12px; background:#7D5BA6; border-radius:50%;
  transform:translateY(-50%); box-shadow: 0 6px 16px rgba(125,91,166,.25);
}
.grow-line span:nth-child(1){ left:2%; }
.grow-line span:nth-child(2){ left:35%; }
.grow-line span:nth-child(3){ left:67%; }
.grow-line span:nth-child(4){ left:96%; }
.grow-line span::after{
  content:attr(data-label); position:absolute; top:18px; left:50%; transform:translateX(-50%);
  color:#6b7280; font-size:12px; white-space:nowrap;
}

/* Reveal animations (JS adds .in) */
.reveal{ opacity:0; transform: translateY(10px); transition: .5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width: 980px){
  .ab-hero .ab-hero-inner{ grid-template-columns: 1fr; }
  .ab-cards{ grid-template-columns: 1fr; }
  .ab-what .ab-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .ab-what .ab-grid{ grid-template-columns: 1fr; }
  .step{ grid-template-columns: 56px 1fr; }
}