/* About page — styles specific to about.html (shared rules live in css/site.css) */

.hero{padding:100px 0 82px;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(45,168,255,.15);filter:blur(26px);right:-170px;top:-230px}
.hero:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(142,240,199,.08);filter:blur(30px);left:-220px;bottom:-250px}
.hero-inner{max-width:920px}
.hero-copy{max-width:790px;margin:0 0 30px}

.section-copy{margin:0 0 36px}

.story-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:start}
.story-main{
  border:1px solid var(--line);border-radius:26px;padding:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:var(--shadow)
}
.story-main p{font-size:18px;color:#c4d2dc;margin:0 0 20px}
.story-main p:last-child{margin-bottom:0}
.story-aside{display:grid;gap:14px}
.fact-card{
  border:1px solid var(--line);border-radius:18px;padding:22px;
  background:rgba(255,255,255,.025)
}
.fact-card strong{
  display:block;font-size:28px;line-height:1.1;margin-bottom:8px;
  color:#dff6ff
}
.fact-card span{color:var(--muted);font-size:14px}

.principles-section{
  background:var(--bg-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.principle{
  border:1px solid var(--line);border-radius:20px;padding:24px;
  background:rgba(255,255,255,.025)
}
.principle .icon{font-size:24px;margin-bottom:14px}
.principle h3{font-size:20px;margin:0 0 10px}
.principle p{margin:0;color:var(--muted);font-size:14px}

.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap-card{
  border:1px solid var(--line);border-radius:20px;padding:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.015))
}
.cap-card h3{font-size:20px;margin:0 0 9px}
.cap-card p{margin:0;color:var(--muted);font-size:14px}
.cap-card .label{
  color:#8fe5ff;font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.10em;margin-bottom:9px
}

.approach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:start}
.steps{display:grid;gap:14px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  border:1px solid var(--line);border-radius:18px;padding:20px;
  background:rgba(255,255,255,.022)
}
.step-num{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(45,168,255,.11);color:#8fe5ff;font-weight:800
}
.step h3{margin:0 0 5px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:14px}

.stack-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.stack-list span{
  padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.025);
  color:#d4e2ec;font-size:13px;font-weight:700
}

.credential-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.credential-list{display:grid;gap:10px}
.credential-item{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  align-items:start;color:#d8e6ee;font-size:14px
}
.credential-item .check{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(142,240,199,.12);color:var(--accent);
  font-size:12px;font-weight:800;margin-top:1px
}

@media(max-width:920px){
  .story-grid,.approach-grid,.credential-grid{grid-template-columns:1fr}
  .principles-grid{grid-template-columns:1fr 1fr}
  .cap-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hero{padding:66px 0 58px}
  .hero-copy{font-size:17px}
  .principles-grid,.cap-grid{grid-template-columns:1fr}
  .story-main{padding:24px}
}