@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ChessGrade public design system — shared by every crawlable page (home, guides,
   blog, puzzles, institutional, legal). The post-login app does NOT use this file. */

:root{
  --bg:#0a0908;
  --surface:#131110;
  --surface2:#1a1712;
  --surface3:#211d16;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --text:#f0ece2;
  --soft:#b7ae9f;
  --soft2:#a89e8d;
  --muted:#7d7568;
  --gold:#e6b348;
  --gold2:#f0c463;
  --gold-soft:rgba(230,179,72,.1);
  --max:1100px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Oswald',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold2)}
a:hover{color:#fff}
::selection{background:var(--gold);color:#0a0908}

/* ── header / nav ── */
.site-header{position:sticky;top:0;z-index:200;background:rgba(10,9,8,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,179,72,.16)}
.nav{max-width:var(--max);margin:auto;min-height:64px;padding:12px 40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;font:700 22px var(--display);letter-spacing:2px;
  text-decoration:none;color:var(--text)}
.brand::before{content:'';width:16px;height:16px;flex:none;transform:rotate(4deg);
  background:conic-gradient(var(--gold) 90deg,var(--surface3) 90deg 180deg,var(--gold) 180deg 270deg,var(--surface3) 270deg)}
.brand span{color:var(--gold)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav-links a{font:12.5px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--soft2);text-decoration:none}
.nav-links a:hover{color:var(--gold)}
.nav-links a.lang{font-size:11px;letter-spacing:2px;background:rgba(230,179,72,.08);border:1px solid rgba(230,179,72,.28);
  color:var(--gold);padding:7px 14px;border-radius:6px}
.nav-links a.lang:hover{background:rgba(230,179,72,.16)}
/* the final nav link ("Train"/"Treinar") reads as the primary CTA */
.nav-links a:last-child{font:600 13px var(--display);letter-spacing:1.5px;background:var(--gold);color:#141008;
  padding:10px 22px;border-radius:7px}
.nav-links a:last-child:hover{background:var(--gold2)}

/* ── content-page hero (guides, blog, puzzles, institutional) ── */
.hero,.content{max-width:900px;margin:auto;padding:60px 24px}
.hero{padding-bottom:32px}
.kicker,.eyebrow{font:11px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 16px}
.hero h1{font:700 clamp(40px,6.5vw,68px)/1.06 var(--display);letter-spacing:1px;text-transform:uppercase;margin:0 0 20px}
.lead{font-size:20px;color:var(--soft);max-width:780px}
.byline{font:13px var(--mono);color:var(--muted);margin-top:18px}

.content{padding-top:20px}
.content h2{font:600 32px/1.2 var(--display);letter-spacing:.5px;margin:52px 0 16px}
.content h3{font:600 20px var(--display);margin:32px 0 8px}
.content p,.content li{color:var(--soft)}
.content strong{color:var(--text)}
.content li{margin:7px 0}

/* ── cards / chips / notes / toc ── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:24px;
  text-decoration:none;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card h2,.card h3{font:600 22px var(--display);letter-spacing:.5px;margin:2px 0 8px;color:var(--gold)}
.card p{font-size:15px;margin:0;color:var(--soft)}
.meta{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
.chip{font:12px var(--mono);letter-spacing:.5px;color:var(--gold);background:var(--gold-soft);
  border:1px solid rgba(230,179,72,.18);border-radius:99px;padding:5px 11px}
.fen,.note{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:18px 20px;margin:20px 0}
.fen{font:13px/1.6 var(--mono);overflow-wrap:anywhere}
.note{border-left:4px solid var(--gold)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 24px}
.toc strong{display:block;margin-bottom:8px;color:var(--text)}

/* ── in-article CTA + buttons ── */
.cta{background:linear-gradient(135deg,rgba(230,179,72,.08),transparent 60%);border:1px solid rgba(230,179,72,.2);
  border-radius:14px;padding:32px;margin-top:50px}
.cta h2{margin:0 0 8px}
.btn{display:inline-block;font:600 15px var(--display);letter-spacing:1.5px;text-transform:uppercase;
  background:var(--gold);color:#141008!important;padding:13px 26px;border-radius:8px;text-decoration:none;margin-top:8px}
.btn:hover{background:var(--gold2);color:#141008!important}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font:600 18px var(--display);letter-spacing:.3px;color:var(--text)}
.faq p{color:var(--soft);max-width:760px}

/* ── static chess board (public puzzle pages) ── */
.board{max-width:520px;margin:28px auto;border:5px solid #29231d;display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1}
.board .sq{display:flex;align-items:center;justify-content:center}
.board .sq.light{background:#e8d6ae}
.board .sq.dark{background:#8b603d}
.board .sq img{width:100%;height:100%;display:block}
.board-placeholder{aspect-ratio:1;max-width:520px;margin:28px auto;
  background:repeating-conic-gradient(#e8d6ae 0 25%,#8b603d 0 50%) 0/25% 25%;border:5px solid #29231d}

/* ── tables / code ── */
table{width:100%;border-collapse:collapse;margin:18px 0}
th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--gold)}
code{overflow-wrap:anywhere;font-family:var(--mono);font-size:.92em}

/* ── footer ── */
.site-footer{border-top:1px solid var(--line);margin-top:72px}
.footer-inner{max-width:var(--max);margin:auto;padding:34px 24px;display:flex;flex-wrap:wrap;gap:13px 22px;
  justify-content:center;text-align:center}
.footer-inner a{font:10px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-decoration:none}
.footer-inner a:hover{color:var(--gold)}
.footer-inner span{width:100%;font:10px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* =========================================================================
   Homepage-only components (/pt/ and /en/)
   ========================================================================= */
.hero-home{position:relative;overflow:hidden;padding:110px 40px 84px;text-align:center;
  background:radial-gradient(ellipse 78% 52% at 50% 0%,rgba(230,179,72,.09) 0%,transparent 70%)}
.hero-home::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-conic-gradient(rgba(230,179,72,.065) 0 25%,transparent 0 50%);background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 55% 65% at 50% 15%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 55% 65% at 50% 15%,#000 0%,transparent 75%)}
.hero-home>*{position:relative}
.hero-home h1{font:700 clamp(42px,7vw,74px)/1.06 var(--display);letter-spacing:1.5px;text-transform:uppercase;margin:0 0 22px}
.hero-home h1 span{color:var(--gold)}
.hero-home .lead{margin:0 auto 38px;max-width:580px;font-size:19px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-cta .btn{padding:16px 36px;letter-spacing:2px;box-shadow:0 10px 30px -10px rgba(230,179,72,.35)}
.btn-ghost{display:inline-block;font:11.5px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line2);padding:15px 28px;border-radius:8px;text-decoration:none}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

.stats{margin:60px auto 0;max-width:700px;display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;background:rgba(255,255,255,.015)}
.stat{flex:1;min-width:140px;padding:24px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.stat:last-child{border-right:none}
.stat-num{font:700 34px var(--display);letter-spacing:1px;color:var(--gold)}
.stat-label{font:11.5px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:6px}

.divider{height:5px;background:repeating-linear-gradient(90deg,rgba(230,179,72,.4) 0 22px,transparent 0 44px)}

.section{padding:74px 40px}
.section-inner{max-width:var(--max);margin:auto}
.section-head{margin-bottom:44px}
.section-head .kicker{margin-bottom:12px}
.section-head h2{font:700 clamp(26px,4vw,40px) var(--display);letter-spacing:1.5px;text-transform:uppercase;margin:0 0 14px}
.section-head p{font-size:16px;color:var(--soft);max-width:560px;margin:0}

.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.feature{position:relative;background:var(--surface);padding:32px 28px 28px;transition:background .2s}
.feature:hover{background:var(--surface2)}
.feature-num{position:absolute;top:16px;right:18px;font:11px var(--mono);color:rgba(230,179,72,.4)}
.feature-glyph{width:46px;height:46px;border-radius:10px;background:var(--gold-soft);border:1px solid rgba(230,179,72,.2);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gold);margin-bottom:18px}
.feature h3{font:600 19px var(--display);letter-spacing:1px;text-transform:uppercase;margin:0 0 9px}
.feature p{font-size:15.5px;color:var(--soft);line-height:1.65;margin:0}
.feature-tag{display:inline-block;margin-top:14px;font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;
  background:var(--gold-soft);color:var(--gold);padding:3px 9px;border-radius:4px;border:1px solid rgba(230,179,72,.18)}

.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px}
.step-num{font:700 44px var(--display);color:rgba(255,255,255,.12);line-height:1}
.step h3{font:600 17px var(--display);letter-spacing:1px;text-transform:uppercase;margin:10px 0 6px}
.step p{font-size:15.5px;color:var(--soft);margin:0}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:24px 22px;text-decoration:none;
  display:block;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--gold);transform:translateY(-2px)}
.post-tag{font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.post h3{font:600 18px var(--display);letter-spacing:.5px;color:var(--gold);margin:0 0 8px;line-height:1.3}
.post p{font-size:14.5px;color:var(--soft);line-height:1.6;margin:0}
.post-cta{margin-top:14px;font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}

.cta-banner{position:relative;overflow:hidden;max-width:760px;margin:auto;text-align:center;
  background:linear-gradient(135deg,rgba(230,179,72,.08) 0%,transparent 60%);border:1px solid rgba(230,179,72,.2);
  border-radius:16px;padding:62px 44px}
.cta-banner::after{content:'';position:absolute;right:-24px;bottom:-24px;width:110px;height:110px;pointer-events:none;
  transform:rotate(10deg);background:repeating-conic-gradient(rgba(230,179,72,.14) 0 25%,transparent 0 50%) 0/25% 25%}
.cta-banner>*{position:relative}
.cta-banner h2{font:700 clamp(26px,4vw,38px) var(--display);letter-spacing:2px;text-transform:uppercase;margin:0 0 14px}
.cta-banner p{font-size:16px;color:var(--soft);margin:0 0 30px}

/* ── mobile ── */
@media(max-width:760px){
  .nav{padding:10px 16px}
  .nav-links{width:100%;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hero,.content{padding:44px 17px}
  .hero-home{padding:70px 18px 56px}
  .section{padding:56px 18px}
  .grid,.features,.steps,.posts{grid-template-columns:1fr}
  .content h2{font-size:27px}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .stat:last-child{border-bottom:none}
  .cta-banner{padding:44px 24px}
  .fen{font-size:11px}
  .footer-inner{padding:30px 17px}
}