/* SEO247 resources hub — derived from landing-new.html design tokens (task #402) */
:root{
  --bg:#0a0f1e; --bg2:#0e1530; --card:#121a38; --line:#1e2a52;
  --ink:#eef2ff; --ink2:#b8c2e8; --ink3:#8d99c9; --ink4:#8391c2;
  --brand:#4f7cff; --brand2:#7c5cff; --accent:#2dd4a7; --coral:#ff6b6b;
  --grad:linear-gradient(120deg,#4f7cff,#7c5cff);
  --r:16px; --w:860px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Heebo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;font-size:17px}
.w{max-inline-size:var(--w);margin-inline:auto;padding-inline:22px}
a{color:inherit;text-decoration:none}
img{max-inline-size:100%;block-size:auto;display:block}

/* nav (same as homepage) */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;padding-block:14px;background:rgba(10,15,30,.92);backdrop-filter:blur(10px);box-shadow:0 2px 24px rgba(0,0,0,.4)}
.nav-in{display:flex;align-items:center;gap:26px;max-inline-size:1140px;margin-inline:auto;padding-inline:22px}
.logo{font-weight:900;font-size:22px}
.logo em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:22px;margin-inline-start:auto;align-items:center}
.nav-links a{color:var(--ink2);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--grad);color:#fff;font-weight:700;padding:12px 26px;border-radius:12px;border:0;cursor:pointer;font-size:16px;font-family:inherit;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(79,124,255,.35)}
.btn-ghost{display:inline-block;color:var(--ink);font-weight:600;padding:12px 24px;border-radius:12px;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.nav .btn{padding:10px 20px;font-size:15px}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer;margin-inline-start:auto}

/* breadcrumb */
.crumbs{padding-block:110px 0;color:var(--ink3);font-size:14px}
.crumbs a{color:var(--ink3)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink2)}

/* article */
.article-head{padding-block:22px 10px}
.article-head h1{font-size:clamp(28px,4.5vw,42px);font-weight:900;line-height:1.25;margin-block-end:14px}
.article-head h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.article-meta{color:var(--ink4);font-size:14px;display:flex;gap:14px;flex-wrap:wrap}
.article-lede{color:var(--ink2);font-size:19px;margin-block-start:16px;max-inline-size:760px}
.article-body{padding-block:34px 60px}
.article-body h2{font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.3;margin-block:44px 14px}
.article-body h3{font-size:20px;font-weight:800;margin-block:30px 10px}
.article-body p{color:var(--ink2);margin-block-end:16px}
.article-body strong{color:var(--ink)}
.article-body ul,.article-body ol{margin-block-end:18px;padding-inline-start:24px;color:var(--ink2)}
.article-body li{margin-block-end:8px}
.article-body a{color:var(--accent);font-weight:600}
.article-body a:hover{text-decoration:underline}
.article-body code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:14.5px;direction:ltr;unicode-bidi:embed}

/* callout + data table */
.note{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:12px;padding:20px 24px;margin-block:26px;color:var(--ink2);font-size:15.5px}
.note strong{color:var(--ink)}
.warn{border-inline-start-color:var(--coral)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-block:24px}
table{inline-size:100%;border-collapse:collapse;background:var(--card);min-inline-size:520px}
th,td{padding:13px 16px;text-align:start;border-block-end:1px solid var(--line);font-size:15px}
th{color:var(--ink3);font-weight:600;font-size:14px}
td{color:var(--ink2)}
tbody tr:last-child th,tbody tr:last-child td{border-block-end:0}
.num{direction:ltr;text-align:start;unicode-bidi:embed}
.caption{color:var(--ink4);font-size:13px;margin-block:-16px 24px;padding-inline-start:4px}

/* stat band (mistakes article) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-block:28px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.stat b{display:block;font-size:30px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--ink3);font-size:13.5px;line-height:1.4;display:block;margin-block-start:6px}

/* CTA box */
.cta-box{background:var(--card);border:1px solid var(--brand);border-radius:var(--r);padding:30px;margin-block:40px;text-align:center}
.cta-box h2{margin-block-start:0!important}
.cta-box p{max-inline-size:560px;margin-inline:auto}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-block-start:18px}
.cta-small{color:var(--ink4);font-size:13.5px;margin-block:14px 0!important}

/* resources index cards */
.res-grid{display:grid;gap:24px;padding-block:30px 60px}
.res-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:border-color .15s,transform .15s;display:block}
.res-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.res-card h2{font-size:22px;font-weight:800;margin-block-end:10px;line-height:1.35}
.res-card p{color:var(--ink2);font-size:15.5px;margin-block-end:14px}
.res-card .res-more{color:var(--accent);font-weight:700;font-size:15px}
.res-tag{display:inline-block;color:var(--accent);font-weight:700;font-size:13px;margin-block-end:10px}

/* related articles */
.related{border-block-start:1px solid var(--line);padding-block:30px 0;margin-block-start:20px}
.related h2{font-size:20px;margin-block:0 18px!important}
.related ul{list-style:none;padding:0}
.related li{padding-block:6px}
.related li::before{content:'← ';color:var(--brand)}

/* footer (same as homepage) */
.foot{border-block-start:1px solid var(--line);padding-block:34px}
.foot .w{max-inline-size:1140px}
.foot-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-logo{font-weight:900;font-size:19px}
.foot-links{display:flex;gap:20px;margin-inline-start:auto;flex-wrap:wrap}
.foot-links a{color:var(--ink3);font-size:14px}
.foot-links a:hover{color:var(--ink)}
.foot-copy{color:var(--ink4);font-size:13px;margin-block-start:16px}

@media(max-width:900px){
  .nav-links{display:none;position:absolute;inset-block-start:100%;inset-inline:0;background:var(--bg2);flex-direction:column;padding:20px;gap:16px;border-block-end:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .crumbs{padding-block-start:92px}
}