/* ============================================================
   About — page-specific layout. Links AFTER assets/theme.css.
   ============================================================ */
.about-hero{
  margin:14px 16px 0; border-radius:20px; overflow:hidden; padding:28px 20px; text-align:center;
  background:radial-gradient(120% 130% at 50% 0%, rgba(20,123,255,0.22), transparent 60%), linear-gradient(160deg,#0a1a38 0%, #030914 75%);
  border:1px solid var(--line);
}
.about-mark{width:60px; height:60px; border-radius:16px; margin:0 auto 14px; background:linear-gradient(135deg,var(--blue-br),var(--blue)); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:20px; color:#04101f; box-shadow:0 10px 26px rgba(20,123,255,0.3); position:relative; overflow:hidden;}
.about-mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px;}
.about-hero h1{font-size:20px; font-weight:900; margin:0 0 4px;}
.about-tagline{font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--blue-br); margin-bottom:12px;}
.about-intro{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.65; max-width:480px; margin:0 auto;}

.section-block-sub{font-size:11px; color:var(--muted); font-weight:600; line-height:1.5; padding:0 16px; margin-bottom:10px;}

/* ============ HOW IT WORKS ============ */
.step-card{display:flex; gap:13px; align-items:flex-start; border-radius:14px; background:var(--card); border:1px solid var(--line); padding:15px; margin:0 16px 8px;}
.step-num{width:34px; height:34px; border-radius:10px; flex-shrink:0; background:rgba(20,123,255,0.14); color:var(--blue-br); display:flex; align-items:center; justify-content:center;}
.step-num .msr{font-size:16px;}
.step-title{font-size:12.5px; font-weight:800; margin-bottom:4px;}
.step-desc{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5;}

/* ============ COIN TYPES ============ */
.coin-grid{display:flex; flex-direction:column; gap:10px; padding:0 16px;}
@media (min-width:640px){ .coin-grid{flex-direction:row;} .coin-grid > *{flex:1;} }
.coin-card{border-radius:16px; background:var(--card); border:1px solid var(--line); padding:17px;}
.coin-card.win{border-color:var(--gold-line);}
.coin-name{font-size:14px; font-weight:900; margin-bottom:12px;}
.coin-card.ads .coin-name{color:var(--blue-br);}
.coin-card.win .coin-name{color:var(--gold);}
.coin-meta{margin-bottom:10px;}
.coin-meta-label{font-size:9px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.coin-meta-value{font-size:12px; color:var(--white); font-weight:600; line-height:1.5;}
.coin-note{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.5; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06);}

/* ============ PRINCIPLES ============ */
.principle-card{border-radius:14px; background:var(--card); border:1px solid var(--line); padding:15px; margin:0 16px 8px;}
.principle-title{font-size:12.5px; font-weight:800; margin-bottom:5px;}
.principle-desc{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5;}

/* ============ APP INFO ============ */
.info-card{border-radius:14px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; margin:0 16px;}
.info-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-top:1px solid rgba(255,255,255,0.06);}
.info-row:first-child{border-top:none;}
.info-row-label{font-size:11px; color:var(--muted); font-weight:600;}
.info-row-value{font-size:12px; font-weight:800; text-align:right;}

/* ============ NAV LINKS ============ */
.about-nav-card{border-radius:14px; background:var(--card); border:1px solid var(--line); overflow:hidden; margin:0 16px;}
.about-nav-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-top:1px solid rgba(255,255,255,0.06); font-size:12.5px; font-weight:700; color:inherit; text-decoration:none; min-height:48px;}
.about-nav-row:first-child{border-top:none;}
.about-nav-row .msr{color:var(--muted); font-size:17px; flex-shrink:0;}