/* ================= intro ================= */
.hero-badge{display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent-ink); font-size:12.5px; font-weight:700; padding:7px 15px; border-radius:99px; margin-bottom:18px; max-width:100%;}
.hero-badge svg{width:15px; height:15px; flex-shrink:0;}
.hero h1{font-size:clamp(30px,4.2vw,46px); font-weight:900; letter-spacing:-.9px; line-height:1.4;}
/* Intro copy fills the column. The measure cap that used to sit here (60ch) left
   a band of empty space beside every lead paragraph; the column is already
   bounded by .wrap's 880px, which is the constraint that matters. */
.hero .lead{font-size:17px; color:var(--muted); margin-top:14px; line-height:2;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); margin:var(--s7) 0;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4) var(--s5); box-shadow:var(--sh-1);}
.stat i{font-size:21px; color:var(--pc);}
.stat b{display:block; font-size:22px; font-weight:900; margin-top:8px; letter-spacing:-.5px;}
.stat span{font-size:12.5px; color:var(--muted);}
.steps{display:grid; gap:var(--s3); margin:var(--s5) 0 var(--s2);}
.step{display:flex; gap:var(--s3); align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4) var(--s5);}
.step .n{width:30px; height:30px; border-radius:10px; background:color-mix(in srgb,var(--pc) 12%, transparent); color:var(--pc); display:grid; place-items:center; font-size:16px; flex-shrink:0;}
.step b{display:block; font-size:15px;}
.step p{font-size:13.6px; color:var(--muted); line-height:1.8;}
.namebox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s6); margin:var(--s6) 0; box-shadow:var(--sh-1);}
.namebox label{font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px;}
.namebox p{font-size:12.8px; color:var(--muted); margin:4px 0 12px;}
.namebox input{width:100%; background:var(--surface-2); border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; font-family:inherit; font-size:15px; color:var(--ink); outline:none;}
.namebox input:focus{border-color:var(--accent);}
.phase-cards{display:grid; gap:var(--s3); margin-top:var(--s4);}
.phase-card{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px; font-size:14px;}
.phase-card i{font-size:19px; color:var(--pc);}
.phase-card em{font-style:normal; margin-inline-start:auto; font-size:12px; color:var(--muted); font-family:'JetBrains Mono',monospace;}

/* ================= certificate ================= */
.cert-wrap{max-width:820px; margin:0 auto;}
.cert{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:52px 48px 44px; box-shadow:var(--sh-2); overflow:hidden; text-align:center;
}
.cert::before{content:''; position:absolute; inset:14px; border:1.5px solid color-mix(in srgb,var(--gold) 45%, transparent); border-radius:12px; pointer-events:none;}
.cert::after{content:''; position:absolute; top:-90px; left:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--gold) 16%, transparent),transparent 70%);}
.cert-in{position:relative; z-index:2;}
.cert-seal{width:66px; height:66px; margin:0 auto 18px; border-radius:50%; background:var(--gold-soft); border:1.5px solid color-mix(in srgb,var(--gold) 50%, transparent); display:grid; place-items:center; font-size:32px; color:var(--gold);}
.cert-kicker{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:3px; color:var(--gold); margin-bottom:6px;}
.cert h1{font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:-.5px;}
.cert .to{font-size:13.5px; color:var(--muted); margin:26px 0 6px;}
.cert .who{font-size:clamp(26px,4vw,38px); font-weight:900; letter-spacing:-.8px; padding-bottom:12px; border-bottom:1.5px solid color-mix(in srgb,var(--gold) 40%, transparent); display:inline-block; min-width:min(420px,80%);}
.cert .desc{font-size:15px; color:var(--ink-2); margin:22px auto 0; max-width:52ch; line-height:2.1;}
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0 26px; text-align:start;}
.cert-cell{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:12px 14px;}
.cert-cell em{font-style:normal; font-size:10.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; letter-spacing:1px; display:block;}
.cert-cell b{font-size:14px; font-weight:700;}
.cert-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line);}
.sig{text-align:start;}
.sig .name{font-size:16px; font-weight:800; border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:5px;}
.sig .role{font-size:11.5px; color:var(--muted);}
.cert-id{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); text-align:end;}
.cert-actions{display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap;}
.locked-cert{text-align:center; padding:60px 20px;}
.locked-cert .big{font-size:52px; color:var(--muted); opacity:.5;}
.locked-cert h1{font-size:24px; font-weight:800; margin:14px 0 8px;}
.locked-cert p{color:var(--muted); max-width:46ch; margin:0 auto 20px;}
.mini-prog{max-width:340px; margin:0 auto 22px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; height:10px; overflow:hidden;}
.mini-prog i{display:block; height:100%; background:var(--p3); border-radius:99px; transition:width .5s;}

/* ================= a11y / modal / glossary ================= */
.skip{position:absolute; inset-inline-start:-9999px; top:10px; z-index:99; background:var(--accent); color:var(--paper); padding:10px 18px; border-radius:10px; font-size:13.5px; font-weight:700; text-decoration:none;}
.skip:focus{inset-inline-start:14px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.modal-bg{position:fixed; inset:0; background:rgba(8,12,20,.6); backdrop-filter:blur(4px); z-index:90; display:grid; place-items:center; padding:20px;}
.modal-bg[hidden]{display:none;}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 26px 22px; max-width:420px; width:100%; box-shadow:var(--sh-2); text-align:center;}
.modal-ic{width:52px; height:52px; border-radius:16px; background:var(--del-soft); color:var(--del); display:grid; place-items:center; font-size:26px; margin:0 auto 14px;}
.modal h3{font-size:19px; font-weight:800; margin-bottom:8px;}
.modal p{font-size:14px; color:var(--muted); line-height:1.9;}
.modal-actions{display:flex; gap:9px; margin-top:20px;}
.modal-actions .btn{flex:1; justify-content:center;}
.btn-danger{background:var(--del); color:var(--on-del);} .btn-danger:hover{filter:brightness(1.08);}
.toast-act{background:var(--toast-act,#ffffff26); border:none; color:inherit; font-family:inherit; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:8px; cursor:pointer; margin-inline-start:4px;}
.toast-act:hover{background:#ffffff40;}

/* search results with context */
.hit-snip{display:block; font-size:11.5px; color:var(--rail-muted); line-height:1.7; margin-top:3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.hit-snip mark{background:color-mix(in srgb,var(--pc) 40%, transparent); color:#fff; border-radius:3px; padding:0 2px;}
.search-mode{padding:10px 18px 4px; font-size:11px; color:var(--rail-muted); display:flex; align-items:center; gap:6px;}

/* review card for last attempt */
.review{padding:var(--s4) var(--s5); border-radius:var(--r-lg); background:var(--warn-soft); border:1px solid var(--warn-bd); border-inline-start:4px solid var(--warn-ink); border-radius:15px; padding:15px 18px; margin:20px 0 4px;}
.review b{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--warn-ink); margin-bottom:6px;}
.review ol{margin:6px 18px 0 0; font-size:13.4px; color:var(--ink-2); line-height:1.85;}
.review .go{background:none; border:none; color:var(--warn-ink); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; margin-top:8px; padding:0; display:inline-flex; gap:5px; align-items:center;}

/* glossary */
/* ================= toast ================= */
.toast{position:fixed; bottom:26px; right:50%; transform:translate(50%,20px); background:var(--toast-bg,var(--ink)); color:var(--toast-ink,var(--paper)); border:1px solid transparent; padding:11px 20px; border-radius:12px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:80; display:flex; align-items:center; gap:8px; box-shadow:var(--sh-2); max-width:88vw;}
.toast.show{opacity:1; transform:translate(50%,0); pointer-events:auto;}
.overlay{display:none; position:fixed; inset:0; background:rgba(8,12,20,.55); z-index:45; backdrop-filter:blur(3px);}
.overlay.show{display:block;}
.mob{display:none;}

/* ================= responsive ================= */
/* ================= گیمیفیکیشن ================= */
.xp-row{display:flex; align-items:baseline; justify-content:space-between; font-size:11.5px; color:var(--rail-muted); margin-bottom:7px;}
.xp-row b{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--rail-ink); font-weight:700;}
.xp-bar{height:6px; border-radius:99px; background:var(--rail-fill); overflow:hidden; position:relative;}
.xp-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--rail-ink); transition:width .7s cubic-bezier(.2,.8,.2,1);}
.rank-row{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px; color:var(--rail-muted);}
.rank-tag{display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--rail-ink); background:var(--rail-fill); padding:3px 9px; border-radius:99px; font-size:11px;}
.xp-gain{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  font-size:13px; background:var(--add); color:var(--on-add); padding:5px 12px; border-radius:99px;
  animation:pop .45s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{0%{transform:scale(.7); opacity:0;} 60%{transform:scale(1.06);} 100%{transform:scale(1); opacity:1;}}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--s3); margin:var(--s4) 0 var(--s2);}
.badge{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  display:flex; gap:11px; align-items:flex-start; box-shadow:var(--sh-1); transition:.18s;
}
.badge i{font-size:21px; color:var(--ink); flex-shrink:0; margin-top:1px;}
.badge b{display:block; font-size:13.2px; font-weight:700; line-height:1.6;}
.badge span{font-size:11.5px; color:var(--muted); line-height:1.65; display:block;}
.badge.off{background:var(--surface-2);} .badge.off b{color:var(--muted);}
.badge.off i{color:var(--muted);}
.badge.new{animation:pop .5s cubic-bezier(.2,1.3,.4,1);}
.badge-strip{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px;}
.mini-badge{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; font-size:15px; color:var(--ink);}
.mini-badge.off{opacity:.35;}
.streak{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);}
.privacy-note{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); line-height:1.9; margin:var(--s4) 0 0;}
.privacy-note i{margin-top:3px; flex-shrink:0;}
.perfect-tag{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--add); border:1px solid var(--add); border-radius:99px; padding:2px 9px;}