:root{
  --bg:#080808;--surf:#0d0d0d;--card:#111111;
  --b0:#1a1a1a;--b1:#242424;
  --lime:#c8f135;--lime-d:#a3c427;
  --white:#efefef;--mid:#666;--muted:#3a3a3a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,.97);
  border-bottom:1px solid var(--b0);
  backdrop-filter:blur(14px);
  padding:16px 52px;
  display:flex;justify-content:space-between;align-items:center;
}
.logo{  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;}
/* .logo em{font-style:normal;color:var(--lime);} */
.nav-right{display:flex;align-items:center;gap:20px;}
.nav-back{font-size:12px;color:var(--mid);text-decoration:none;transition:color .2s;}
.nav-back:hover{color:var(--white);}
.nav-btn{background:#e8ff47;color:var(--bg);padding:9px 22px;border-radius:6px;font-weight:700;font-size:13px;text-decoration:none;transition:background .2s;}
.nav-btn:hover{background:var(--lime-d);}

/* ══════════════════════════════════
   HERO STRIP
══════════════════════════════════ */
.about-hero{
  padding:72px 52px 64px;
  border-bottom:1px solid var(--b0);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  max-width:1200px;
  margin:0 auto;
}
.ah-left{}
.ah-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#e8ff47;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.ah-tag-line{width:20px;height:1px;background:#e8ff47;}
.ah-name{font-family:'Syne',sans-serif;font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:-2px;line-height:.95;margin-bottom:8px;}
.ah-role{font-size:13px;color:var(--mid);letter-spacing:1px;text-transform:uppercase;}

.ah-right{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.ah-stat{}
.ah-stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.ah-stat-val{font-size:14px;color:var(--white);font-weight:500;display:flex;align-items:center;gap:7px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:#e8ff47;flex-shrink:0;}

/* ══════════════════════════════════
   CONTENT — two column on desktop
══════════════════════════════════ */
.about-body{
  max-width:1200px;
  margin:0 auto;
  padding:72px 52px 80px;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:80px;
  align-items:start;
}

/* Story left */
.story{}
.story-section-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#e8ff47;font-weight:700;margin-bottom:24px;display:block;}
.story p{font-size:15px;color:#888;line-height:1.85;font-weight:300;margin-bottom:20px;}
.story p:last-child{margin-bottom:0;}
.story p strong{color:var(--white);font-weight:500;}
.story p em{font-style:italic;color:rgba(255,255,255,.4);}
.story-quote{
  border-left:2px solid #e8ff47;
  padding:2px 0 2px 20px;
  margin:28px 0;
}
.story-quote p{
  font-family:'Syne',sans-serif;
  font-size:17px !important;
  font-weight:700 !important;
  color:var(--white) !important;
  line-height:1.45 !important;
  margin-bottom:0 !important;
}

/* Right sidebar */
.about-sidebar{display:flex;flex-direction:column;gap:2px;}

/* Principles card */
.sidebar-card{
  background:var(--card);
  border:1px solid var(--b0);
  padding:28px;
}
.sidebar-card:first-child{border-radius:12px 12px 0 0;}
.sidebar-card:last-child{border-radius:0 0 12px 12px;}
.sc-tag{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:block;font-weight:600;}

.pr-list{display:flex;flex-direction:column;gap:0;}
.pr-item{padding:16px 0;border-bottom:1px solid var(--b0);}
.pr-item:first-child{padding-top:0;}
.pr-item:last-child{border-bottom:none;padding-bottom:0;}
.pr-title{font-size:13px;font-weight:600;color:var(--white);margin-bottom:4px;}
.pr-desc{font-size:12px;color:var(--mid);line-height:1.65;font-weight:300;}

/* CTA card */
.cta-card{
  background:rgba(200,241,53,.06);
  border:1px solid rgba(200,241,53,.15);
  border-radius:12px;
  padding:28px;
  margin-top:16px;
}
.cc-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;}
.cc-sub{font-size:13px;color:var(--mid);line-height:1.65;font-weight:300;margin-bottom:20px;}
.btn-main{
  display:inline-flex;align-items:center;gap:8px;
  background:#e8ff47;color:var(--bg);
  padding:12px 24px;border-radius:7px;
  font-weight:700;font-size:13px;
  text-decoration:none;width:100%;justify-content:center;
  transition:background .2s;
}
.btn-main:hover{background:var(--lime-d);}
.btn-main svg{transition:transform .2s;}
.btn-main:hover svg{transform:translateX(3px);}
.cc-note{font-size:11px;color:var(--muted);text-align:center;margin-top:8px;}

/* ══════════════════════════════════
   FOOTER — exact same as blog post
══════════════════════════════════ */
footer{
  background:var(--surf);
  border-top:1px solid var(--b0);
  padding:52px 52px 36px;
}
.footer-main{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-brand{}
.f-logo{  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;}
/* .f-logo em{font-style:normal;color:var(--lime);} */
.f-tagline{font-size:13px;color:var(--mid);line-height:1.65;max-width:220px;font-weight:300;margin-bottom:20px;}

/* Social icons */
.social-row{display:flex;gap:8px;flex-wrap:wrap;}
.social-icon{
  width:34px;height:34px;
  border:1px solid var(--b1);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--mid);
  transition:all .2s;
  flex-shrink:0;
}
.social-icon:hover{border-color:#e8ff47;color:#e8ff47;background:rgba(200,241,53,.06);}
.social-icon svg{width:14px;height:14px;}

.footer-col-title{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--mid);font-weight:700;margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:13px;color:var(--mid);text-decoration:none;transition:color .2s;}
.footer-col ul li a:hover{color:#e8ff47;}

.footer-bottom{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  padding-top:28px;
  border-top:1px solid var(--b0);
}
.f-copy{font-size:12px;color:var(--white);}
.f-bottom-links{display:flex;gap:20px;}
.f-bottom-links a{font-size:12px;color:var(--white);text-decoration:none;transition:color .2s;}
.f-bottom-links a:hover{color:#e8ff47;}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1024px){
  .about-hero{grid-template-columns:1fr;gap:40px;padding:56px 40px 52px;}
  .about-body{grid-template-columns:1fr;gap:48px;padding:56px 40px 72px;}
  .about-sidebar{flex-direction:row;flex-wrap:wrap;gap:16px;}
  .sidebar-card{flex:1;min-width:260px;border-radius:12px !important;}
  .cta-card{margin-top:0;flex:1;min-width:260px;}
}

@media(max-width:768px){
  nav{padding:14px 24px;}
  .about-hero{padding:48px 24px 44px;gap:32px;}
  .ah-right{grid-template-columns:1fr 1fr;}
  .about-body{padding:48px 24px 64px;}
  .about-sidebar{flex-direction:column;}
  .sidebar-card{border-radius:12px !important;}
  /* FOOTER TABLET */
  footer{padding:44px 24px 28px;}
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
}

@media(max-width:540px){
  nav{padding:13px 20px;}
  .nav-btn{display:none;}
  .about-hero{padding:40px 20px 36px;}
  .ah-name{letter-spacing:-1.5px;}
  .ah-right{grid-template-columns:1fr 1fr;gap:20px;}
  .about-body{padding:40px 20px 56px;}
  /* FOOTER MOBILE */
  footer{padding:40px 20px 24px;}
  .footer-main{
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer-brand{
    padding-bottom:32px;
    border-bottom:1px solid var(--b0);
  }
  .f-logo{font-size:22px;}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}