:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --accent: #6c63ff;
  --text: #0f172a;
  --muted: #4b5563;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --topbar-border: #e2e8f0;
  --topbar-ink: var(--text);
  --topbar-panel-bg: #ffffff;
  --topbar-panel-border: #e2e8f0;
  --topbar-panel-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  --topbar-hover: rgba(108, 99, 255, 0.08);
  font-family: "Vazirmatn", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 70% 10%, rgba(108, 99, 255, 0.08), transparent 35%), var(--bg);
  color: var(--text);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.page-section {
  margin-bottom: 48px;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eyebrow {
  display: inline-flex;
  padding: 6px 12px;
  background: rgba(108, 99, 255, 0.12);
  color: #4338ca;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
}

.lead {
  color: var(--muted);
  line-height: 1.8;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.card {
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.stat {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}

.muted {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.hero-panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-title {
  margin: 0;
  font-weight: 700;
}

.panel-list {
  margin: 0;
  padding: 0 18px 0 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
}

.section-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.service-card {
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
  border-color: rgba(108, 99, 255, 0.5);
  transform: translateY(-3px);
}

.service-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(108, 99, 255, 0.12);
  color: #4338ca;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.service-card h3 {
  margin: 0;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.workflow-card {
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.label {
  display: inline-flex;
  padding: 4px 10px;
  background: rgba(108, 99, 255, 0.14);
  color: #4338ca;
  border-radius: 8px;
  font-weight: 700;
}

.workflow-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.team-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 12px;
  background: rgba(108, 99, 255, 0.05);
  border: 1px solid rgba(108, 99, 255, 0.16);
}

.team-track {
  display: flex;
  gap: 16px;
  transition: transform 0.6s ease;
  will-change: transform;
}

.team-card {
  min-width: 220px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  transform-style: preserve-3d;
}

.team-card.is-active {
  border-color: rgba(108, 99, 255, 0.6);
}

.team-card.flip {
  animation: cardFlip 0.8s ease;
}

.team-photo {
  width: 100%;
  height: 140px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.3), rgba(148, 163, 255, 0.15));
  border: 1px dashed rgba(108, 99, 255, 0.4);
  margin-bottom: 12px;
}

.team-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.6;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.info-card {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.info-card h3 {
  margin: 0;
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}

.follow-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04) var(--social-icon) no-repeat center / contain;
  border: 1px solid rgba(148, 163, 184, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.follow-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

.follow-tile--instagram {
  --social-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20stroke%3D%22%23000000%22%20stroke-width%3D%220.00032%22%20transform%3D%22matrix(1,%200,%200,%201,%200,%200)%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%220.256%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint0_radial_87_7153)%22%3E%3C/rect%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint1_radial_87_7153)%22%3E%3C/rect%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint2_radial_87_7153)%22%3E%3C/rect%3E%20%3Cpath%20d%3D%22M23%2010.5C23%2011.3284%2022.3284%2012%2021.5%2012C20.6716%2012%2020%2011.3284%2020%2010.5C20%209.67157%2020.6716%209%2021.5%209C22.3284%209%2023%209.67157%2023%2010.5Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2021C18.7614%2021%2021%2018.7614%2021%2016C21%2013.2386%2018.7614%2011%2016%2011C13.2386%2011%2011%2013.2386%2011%2016C11%2018.7614%2013.2386%2021%2016%2021ZM16%2019C17.6569%2019%2019%2017.6569%2019%2016C19%2014.3431%2017.6569%2013%2016%2013C14.3431%2013%2013%2014.3431%2013%2016C13%2017.6569%2014.3431%2019%2016%2019Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2015.6C6%2012.2397%206%2010.5595%206.65396%209.27606C7.2292%208.14708%208.14708%207.2292%209.27606%206.65396C10.5595%206%2012.2397%206%2015.6%206H16.4C19.7603%206%2021.4405%206%2022.7239%206.65396C23.8529%207.2292%2024.7708%208.14708%2025.346%209.27606C26%2010.5595%2026%2012.2397%2026%2015.6V16.4C26%2019.7603%2026%2021.4405%2025.346%2022.7239C24.7708%2023.8529%2024.7708%2024.7708%2022.7239%2025.346C21.4405%2026%2019.7603%2026%2016.4%2026H15.6C12.2397%2026%2010.5595%2026%209.27606%2025.346C8.14708%2024.7708%207.2292%2023.8529%206.65396%2022.7239C6%2021.4405%206%2019.7603%206%2016.4V15.6ZM15.6%208H16.4C18.1132%208%2019.2777%208.00156%2020.1779%208.0751C21.0548%208.14674%2021.5032%208.27659%2021.816%208.43597C22.5686%208.81947%2023.1805%209.43139%2023.564%2010.184C23.7234%2010.4968%2023.8533%2010.9452%2023.9249%2011.8221C23.9984%2012.7223%2024%2013.8868%2024%2015.6V16.4C24%2018.1132%2023.9984%2019.2777%2023.9249%2020.1779C23.8533%2021.0548%2023.7234%2021.5032%2023.564%2021.816C23.1805%2022.5686%2022.5686%2023.1805%2021.816%2023.564C21.5032%2023.7234%2021.0548%2023.8533%2020.1779%2023.9249C19.2777%2023.9984%2018.1132%2024%2016.4%2024H15.6C13.8868%2024%2012.7223%2023.9984%2011.8221%2023.9249C10.9452%2023.8533%2010.4968%2023.7234%2010.184%2023.564C9.43139%2023.1805%208.81947%2022.5686%208.43597%2021.816C8.27659%2021.5032%208.14674%2021.0548%208.0751%2020.1779C8.00156%2019.2777%208%2018.1132%208%2016.4V15.6C8%2013.8868%208.00156%2012.7223%208.0751%2011.8221C8.14674%2010.9452%208.27659%2010.4968%208.43597%2010.184C8.81947%209.43139%209.43139%208.81947%2010.184%208.43597C10.4968%208.27659%2010.9452%208.14674%2011.8221%208.0751C12.7223%208.00156%2013.8868%208%2015.6%208Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22paint0_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(12%2023)%20rotate(-55.3758)%20scale(25.5196)%22%3E%20%3Cstop%20stop-color%3D%22%23B13589%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%220.79309%22%20stop-color%3D%22%23C62F94%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238A3AC8%22%3E%3C/stop%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id%3D%22paint1_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(11%2031)%20rotate(-65.1363)%20scale(22.5942)%22%3E%20%3Cstop%20stop-color%3D%22%23E0E8B7%22/%3E%20%3Cstop%20offset%3D%220.444662%22%20stop-color%3D%22%23FB8A2E%22/%3E%20%3Cstop%20offset%3D%220.71474%22%20stop-color%3D%22%23E2425C%22/%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E2425C%22%20stop-opacity%3D%220%22/%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id%3D%22paint2_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(0.500002%203)%20rotate(-8.1301)%20scale(38.8909%208.31836)%22%3E%20%3Cstop%20offset%3D%220.156701%22%20stop-color%3D%22%23406ADC%22/%3E%20%3Cstop%20offset%3D%220.467799%22%20stop-color%3D%22%236A45BE%22/%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236A45BE%22%20stop-opacity%3D%220%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3C/g%3E%3C/svg%3E');
}

.follow-tile--youtube {
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%20-7%2048%2048%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%3E%3Ctitle%3EYoutube-color%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Color-%22%20transform%3D%22translate(-200.000000,%20-368.000000)%22%20fill%3D%22%23CE1312%22%3E%3Cpath%20d%3D%22M219.044,391.269916%20L219.0425,377.687742%20L232.0115,384.502244%20L219.044,391.269916%20Z%20M247.52,375.334163%20C247.52,375.334163%20247.0505,372.003199%20245.612,370.536366%20C243.7865,368.610299%20241.7405,368.601235%20240.803,368.489448%20C234.086,368%20224.0105,368%20224.0105,368%20L223.9895,368%20C223.9895,368%20213.914,368%20207.197,368.489448%20C206.258,368.601235%20204.2135,368.610299%20202.3865,370.536366%20C200.948,372.003199%20200.48,375.334163%20200.48,375.334163%20C200.48,375.334163%20200,379.246723%20200,383.157773%20L200,386.82561%20C200,390.73817%20200.48,394.64922%20200.48,394.64922%20C200.48,394.64922%20200.948,397.980184%20202.3865,399.447016%20C204.2135,401.373084%20206.612,401.312658%20207.68,401.513574%20C211.52,401.885191%20224,402%20224,402%20C224,402%20234.086,401.984894%20240.803,401.495446%20C241.7405,401.382148%20243.7865,401.373084%20245.612,399.447016%20C247.0505,397.980184%20247.52,394.64922%20247.52,394.64922%20C247.52,394.64922%20248,390.73817%20248,386.82561%20L248,383.157773%20C248,379.246723%20247.52,375.334163%20247.52,375.334163%20L247.52,375.334163%20Z%22%20id%3D%22Youtube%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.follow-tile--telegram {
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%20fill%3D%22url(%23paint0_linear_87_7225)%22/%3E%3Cpath%20d%3D%22M22.9866%2010.2088C23.1112%209.40332%2022.3454%208.76755%2021.6292%209.082L7.36482%2015.3448C6.85123%2015.5703%206.8888%2016.3483%207.42147%2016.5179L10.3631%2017.4547C10.9246%2017.6335%2011.5325%2017.541%2012.0228%2017.2023L18.655%2012.6203C18.855%2012.4821%2019.073%2012.7665%2018.9021%2012.9426L14.1281%2017.8646C13.665%2018.3421%2013.7569%2019.1512%2014.314%2019.5005L19.659%2022.8523C20.2585%2023.2282%2021.0297%2022.8506%2021.1418%2022.1261L22.9866%2010.2088Z%22%20fill%3D%22white%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_87_7225%22%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%2230%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337BBFE%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23007DBB%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}

.follow-tile--whatsapp {
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2031C23.732%2031%2030%2024.732%2030%2017C30%209.26801%2023.732%203%2016%203C8.26801%203%202%209.26801%202%2017C2%2019.5109%202.661%2021.8674%203.81847%2023.905L2%2031L9.31486%2029.3038C11.3014%2030.3854%2013.5789%2031%2016%2031ZM16%2028.8462C22.5425%2028.8462%2027.8462%2023.5425%2027.8462%2017C27.8462%2010.4576%2022.5425%205.15385%2016%205.15385C9.45755%205.15385%204.15385%2010.4576%204.15385%2017C4.15385%2019.5261%204.9445%2021.8675%206.29184%2023.7902L5.23077%2027.7692L9.27993%2026.7569C11.1894%2028.0746%2013.5046%2028.8462%2016%2028.8462Z%22%20fill%3D%22%23BFC8D0%22/%3E%3Cpath%20d%3D%22M28%2016C28%2022.6274%2022.6274%2028%2016%2028C13.4722%2028%2011.1269%2027.2184%209.19266%2025.8837L5.09091%2026.9091L6.16576%2022.8784C4.80092%2020.9307%204%2018.5589%204%2016C4%209.37258%209.37258%204%2016%204C22.6274%204%2028%209.37258%2028%2016Z%22%20fill%3D%22url(%23paint0_linear_87_7264)%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2030C23.732%2030%2030%2023.732%2030%2016C30%208.26801%2023.732%202%2016%202C8.26801%202%202%208.26801%202%2016C2%2018.5109%202.661%2020.8674%203.81847%2022.905L2%2030L9.31486%2028.3038C11.3014%2029.3854%2013.5789%2030%2016%2030ZM16%2027.8462C22.5425%2027.8462%2027.8462%2022.5425%2027.8462%2016C27.8462%209.45755%2022.5425%204.15385%2016%204.15385C9.45755%204.15385%204.15385%209.45755%204.15385%2016C4.15385%2018.5261%204.9445%2020.8675%206.29184%2022.7902L5.23077%2026.7692L9.27993%2025.7569C11.1894%2027.0746%2013.5046%2027.8462%2016%2027.8462Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M12.5%209.49989C12.1672%208.83131%2011.6565%208.8905%2011.1407%208.8905C10.2188%208.8905%208.78125%209.99478%208.78125%2012.05C8.78125%2013.7343%209.52345%2015.578%2012.0244%2018.3361C14.438%2020.9979%2017.6094%2022.3748%2020.2422%2022.3279C22.875%2022.2811%2023.4167%2020.0154%2023.4167%2019.2503C23.4167%2018.9112%2023.2062%2018.742%2023.0613%2018.696C22.1641%2018.2654%2020.5093%2017.4631%2020.1328%2017.3124C19.7563%2017.1617%2019.5597%2017.3656%2019.4375%2017.4765C19.0961%2017.8018%2018.4193%2018.7608%2018.1875%2018.9765C17.9558%2019.1922%2017.6103%2019.083%2017.4665%2019.0015C16.9374%2018.7892%2015.5029%2018.1511%2014.3595%2017.0426C12.9453%2015.6718%2012.8623%2015.2001%2012.5959%2014.7803C12.3828%2014.4444%2012.5392%2014.2384%2012.6172%2014.1483C12.9219%2013.7968%2013.3426%2013.254%2013.5313%2012.9843C13.7199%2012.7145%2013.5702%2012.305%2013.4803%2012.05C13.0938%2010.953%2012.7663%2010.0347%2012.5%209.49989Z%22%20fill%3D%22white%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_87_7264%22%20x1%3D%2226.5%22%20y1%3D%227%22%20x2%3D%224%22%20y2%3D%2228%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235BD066%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2327B43E%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}

@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-track {
    transition: none;
  }

  .team-card.flip {
    animation: none;
  }
}

@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .team-card {
    min-width: 200px;
  }
}