.about {
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 6rem) 1.5rem;
}

.about .grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;   /* single column layout */
  align-items: start;
}

/* Removed the 2-column desktop layout because there is no second panel */

.about .panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
}

.about h3 {
  margin: 0 0 .25rem;
  font-size: 1.4rem;
}

.about p {
  color: #e9e9e9;
}

.pillars {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;            /* moved from inline */
}

.pillar {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
}

.pillar em {
  font-style: normal;
  font-weight: 800;
}

/* Founder inline block (replaces the old "solo panel") */
.founder-inline {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  margin-top: 1rem;
}

.founder-inline img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}
/* Center the main About paragraph as a text block inside the existing panel */
.about .panel > p:first-of-type {
  width: 90%;          /* your “like 80%” */
  max-width: 70ch;     /* don’t let lines get too long on big screens */
  margin: 1rem auto;   /* center horizontally */
  text-align: center;  /* center the text */
  padding: 1rem 1.25rem; /* some breathing room so it feels like a block */
}

/* On small screens let it breathe full width */
@media (max-width: 640px) {
  .about .panel > p:first-of-type {
    width: 100%;
  }
}
/* =========================
   ABOUT – FIT IN VIEWPORT (MOBILE)
   Target: ~5% top & bottom margin
   ========================= */

@media (max-width: 820px) {
  .about {
    min-height: 100vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
    display: flex;
    align-items: center; /* vertically centers the block */
  }

  .about .section-inner {
    width: 100%;
  }

  .about .panel {
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
  }

  /* Headline tighter */
  .about h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
  }

  /* Main paragraph: smaller + wider */
  .about .panel > p:first-of-type {
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 100%;
    padding: 0.6rem 0.75rem;
    margin: 0.5rem auto 0.6rem;
    text-align: left;
  }

  /* Pillars: tighter cards */
  .pillars {
    gap: 0.55rem;
    margin-top: 0.6rem;
  }

  .pillar {
    padding: 0.6rem 0.65rem;
    gap: 0.55rem;
    border-radius: 14px;
  }

  .pillar span {
    font-size: 1rem;
  }

  .pillar strong {
    font-size: 0.95rem;
  }

  .pillar div {
    font-size: 0.85rem;
    line-height: 1.35;
  }
}

/* Extra-tight phones */
@media (max-width: 480px) {
  .about .panel {
    padding: 0.95rem 1rem;
  }

  .about h3 {
    font-size: 1.05rem;
  }

  .about .panel > p:first-of-type {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .pillar div {
    font-size: 0.82rem;
  }
}
/* =========================
   ABOUT – WIDER PANEL, STILL BREATHABLE
   ========================= */

@media (max-width: 820px) {
  .about .panel {
    width: 94%;          /* wider block */
    max-width: 520px;    /* prevents tablet awkwardness */
    margin-inline: auto;
  }
}

/* Smaller phones: slightly less wide */
@media (max-width: 480px) {
  .about .panel {
    width: 94%;
    max-width: 440px;
  }
}

/* Tiny phones */
@media (max-width: 360px) {
  .about .panel {
    width: 90%;
  }
}
/* =========================
   ABOUT – TRUE CENTER + MUCH WIDER (MOBILE)
   ========================= */

@media (max-width: 820px) {
  .about .panel {
    width: 100%;    /* ~1rem margin on each side */
    max-width: none;            /* remove artificial cap */
    margin: 0 auto;             /* HARD center */
    box-sizing: border-box;
  }
}

/* Phones: even closer to the edges, still breathing */
@media (max-width: 480px) {
  .about .panel {
    width: 100%; /* ~0.7rem per side */
  }
}

/* Tiny phones */
@media (max-width: 360px) {
  .about .panel {
    width: 100%;
  }
}
/* =========================
   ABOUT – FORCE FULL WIDTH ON MOBILE (NO MORE CONTAINER PADDING)
   ========================= */

@media (max-width: 820px) {
  /* Kill the global section-inner constraints inside About */
  #AboutUs .section-inner {
    max-width: none !important;
    width: 110% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep a small premium margin to the screen edges */
  #AboutUs .panel {
    width: calc(100vw - 1.2rem) !important; /* ~0.6rem each side */
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  #AboutUs .panel {
    width: calc(100vw - 1rem) !important; /* ~0.5rem each side */
  }
}