:root{ --glass:rgba(255,255,255,.04); --glass-strong:rgba(255,255,255,.08); }

/* --- Hero wrapper --- */
.about-hero{
  position:relative;
  padding:6rem 0 5rem;
  overflow:hidden;
  background:linear-gradient(135deg,#1b1f27 0%,#0f1116 100%);
}
.about-hero__inner{
  display:flex;
  gap:3rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* --- Intro copy --- */
.intro-copy{flex:1 1 420px;min-width:280px;}
.lede{
  font-size:1.2rem;
  line-height:1.55;
  color:#e4e4e4;
  margin:0 0 1.2rem;
}
.intro-tag{color:#c0c0c0;margin:0 0 2rem;font-size:1.0rem;}

/* --- Metrics --- */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.2rem 1.4rem;
  margin-top:2rem;
}
.metric{
  background:var(--glass);
  padding:1rem 1.2rem;
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  text-align:center;
}
.metric span{display:block;font-size:1.45rem;font-weight:700;color:var(--accent);}
.metric label{font-size:.78rem;color:#9ca3af;letter-spacing:.35px;}

/* --- Portrait card --- */
.portrait-card{
  flex:0 0 280px;
  text-align:center;
  background:var(--glass-strong);
  padding:2rem 2.2rem;
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.portrait-frame{
  width:240px;height:240px;border-radius:50%;margin:0 auto 1rem;
  overflow:hidden;border:4px solid #30363d;box-shadow:0 0 30px rgba(0,0,0,.5);
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;}
.subtitle{color:#d0d0d0;font-size:.92rem;margin:0;}

/* --- Decorative blobs --- */
.glow-blob{
  position:absolute;width:420px;height:420px;border-radius:50%;
  filter:blur(160px);opacity:.55;z-index:-1;
}
.blob-a{background:var(--accent);top:-120px;left:-90px;animation:float1 18s linear infinite alternate;}
.blob-b{background:#ff66d7;bottom:-160px;right:-120px;animation:float2 22s linear infinite alternate;}
@keyframes float1{0%{transform:translate(0,0) scale(1);}100%{transform:translate(12%,5%) scale(1.15);}}
@keyframes float2{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-8%,-4%) scale(1.08);}}

/* --- Strip cards --- */
.strip{background:var(--card-bg);padding:4.5rem 0;}
.strip__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.strip-card{
  background:#0e1117;border:1px solid #30363d;border-radius:10px;
  padding:1.8rem 1.6rem;transition:transform .25s ease,box-shadow .25s ease;
}
.strip-card:hover{transform:translateY(-6px);box-shadow:0 0 14px rgba(88,166,255,.35);}
.strip-card h3{margin:.2rem 0 1rem;font-size:1.12rem;color:var(--accent);}
.strip-card p{color:#c6cdd5;font-size:.95rem;}

/* --- Principles --- */
.principles{padding:5rem 0;background:linear-gradient(180deg,#0d1117 0%,#151922 100%);}
.principles h2{margin:0 0 2.4rem;font-size:1.9rem;}
.principles-list{
  list-style:none;padding:0;margin:0 auto;max-width:860px;
  display:flex;flex-direction:column;gap:1.4rem;font-size:1.02rem;line-height:1.55;color:#c0c0c0;
}
.principles-list li{position:relative;padding-left:1.6rem;}
.principles-list li:before{content:"→";position:absolute;left:0;top:0;color:var(--accent);}
.principles-list li span{color:var(--fg);font-weight:600;}
.center{text-align:center;}

/* --- CTA --- */
.cta-section{padding:6rem 0;background:var(--card-bg);}
.cta-box{
  background:#0e1117;border:1px solid #30363d;border-radius:12px;
  padding:3rem 2rem;text-align:center;box-shadow:0 0 28px rgba(0,0,0,.3);
}
.cta-box h2{margin:0 0 1rem;font-size:clamp(1.6rem,3vw,2.2rem);}
.cta-box p{margin:0 0 2rem;color:#b0b0b0;}
.btn-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* --- Reveal animation (used by about.js) --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.reveal-in{opacity:1;transform:none;}

/* --- Responsive tweaks --- */
@media(max-width:860px){
  .portrait-card{order:-1;margin:0 auto 2rem;}
}

/* Align About hero spacing with other pages */
.about-hero.hero{padding:6rem 1.5rem;text-align:center;}
.about-hero__inner{display:block;max-width:var(--max-width);margin:0 auto;}
.intro-copy{margin:0 auto;max-width:760px;}
.metrics{justify-content:center;}
.portrait-card{margin:3rem auto 0;}
.glow-blob{display:none;}           /* hide blobs on small viewports */

@media(min-width:960px){
  .about-hero__inner{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:3rem;
    text-align:left;
  }
  .portrait-card{margin:0;}
  .metrics{justify-content:flex-start;}
}

/* --------------------------------------------------------- */
/*  HEADER / FOOTER                                           */
/* --------------------------------------------------------- */
header,footer{background:var(--card-bg);border-bottom:1px solid #30363d;}
header{position:sticky;top:0;z-index:100;}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem 1.5rem;}

header .container{display:flex;justify-content:space-between;align-items:center;}
header nav a{margin-left:1rem;font-weight:500}
header nav a:hover{opacity:.85}

.btn{
  display:inline-block;background:var(--accent);color:#000;
  padding:.45rem 1rem;border-radius:6px;font-weight:600;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}

/* slim footer */
footer{
  padding:2rem 0;text-align:center;font-size:.85rem;
  color:#8b949e;background:transparent;border:none;
}