/* ===== Tokens (inherits your global vars) ===== */
:root{
  /* fallbacks if not defined globally */
  --border:#1b2230;
  --brand:#4dd4b8;
  --brand-strong:#3bb09a;
  --muted:#9fb0c7;
  --card:#121720;
}

/* General container */
.wrap{ max-width:1100px; margin:0 auto; padding:0 1.25rem; }

/* 1) About hero */
.about-hero{
  padding: 2rem 0 2rem;
  position: relative; /*create stacking context*/
  z-index: 0;
  text-align:center;
  background: transparent;
    /*radial-gradient(60rem 40rem at 20% -20%, rgba(77,212,184,.15), transparent),
    radial-gradient(60rem 40rem at 80% 0%, rgba(143,209,122,.10), transparent);*/
  border-bottom:1px solid var(--border);
  overflow: visible;
  /*display: flow-root;*/
}
/*.about-hero p{ color:var(--muted); max-width:760px; margin:.5rem auto 0; }*/

/* full-viewport gradient layer */
.about-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);  /* more reliable than margin-left:-50vw */
  z-index: -1;                  /* behind hero content, inside its stacking context */
  pointer-events: none;
  background:
    radial-gradient(90rem 60rem at 10% -10%, rgba(77,212,184,.15), transparent 60%),
    radial-gradient(90rem 60rem at 90% 0%,  rgba(143,209,122,.10), transparent 60%);
}

/* 2) Icon features row */
.about-values{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
  margin:3rem 0;
  text-align:center;
}
.value{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
}
.value h3{ margin:.75rem 0 .35rem; }
.value p{ color:var(--muted); margin:.25rem 0 0; }
.value img{ 
  width:60px; 
  height:60px; 
  display:block; /*make it a block element*/
  margin: 0 auto 0.75rem /*centers horizontally, adds spacing below*/
}

/* 3) Visual timeline / table */
.about-timeline{ margin:2.5rem 0; }
.about-timeline h2{ margin-bottom:.75rem; }
.about-timeline table{
  width:100%; border-collapse:collapse;
  background:var(--card); border:1px solid var(--border);
  border-radius:.75rem; overflow:hidden;
}
.about-timeline th, .about-timeline td{
  padding:.9rem 1rem; vertical-align:top;
}
.about-timeline th{
  width:5.5rem; text-align:right; font-weight:800;
  color:var(--brand); background:#0f141b; border-right:2px solid var(--border);
}
.about-timeline tr + tr td, .about-timeline tr + tr th{ border-top:1px solid var(--border); }

/* 4) CTA footer */
.about-cta{
  text-align:center; padding:3rem 1.5rem;
  background:#0f141b; border:1px solid var(--border);
  border-radius:1rem; margin:3rem 0 4rem;
}
.about-cta p{ color:var(--muted); }

/* Button styles (use your global .btn if present; otherwise add these) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.8rem 1.1rem; border-radius:.7rem; border:0; cursor:pointer;
  font-weight:700; text-decoration:none;
}
.btn.primary{ background:var(--brand); color:#0a0a0a; }
.btn.primary:hover{ background:var(--brand-strong); }
.btn.secondary{ background:transparent; color:var(--brand); border:1px solid var(--brand); }
.btn.secondary:hover{ background:rgba(77,212,184,.1); }

/* Mobile tweaks */
@media (max-width:900px){
  .about-hero{ padding:3rem 0 2.25rem; }
}