:root{
  --bg:#070A12;
  --panel:#0E1424;
  --card:#0F1930;
  --card2:#0B1224;
  --text:#EAF0FF;
  --muted:#A9B6D4;
  --brand:#2DD4BF;
  --brand2:#60A5FA;
  --accent:#FBBF24;
  --danger:#FB7185;
  --ring: rgba(45,212,191,.35);
  --radius:18px;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 10px 25px rgba(0,0,0,.35);
  --max:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 380px at 15% 0%, rgba(96,165,250,.22), transparent 55%),
    radial-gradient(900px 380px at 85% 0%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(251,191,36,.10), transparent 55%),
    linear-gradient(180deg, #060812, #070A12 20%, #070A12);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%; height:auto}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,10,18,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; gap:10px; align-items:center;
}
.brand img{width:34px; height:34px}
.brand .name{font-weight:800; letter-spacing:.2px}
.brand .tag{display:block; font-size:12px; color:var(--muted); margin-top:2px}

.menu{
  display:flex; gap:16px; align-items:center;
}
.menu a{
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}
.menu a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.menu a.active{color:var(--text); background: rgba(45,212,191,.14); box-shadow: 0 0 0 1px rgba(45,212,191,.18) inset}

.cta{
  display:inline-flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(96,165,250,.16));
  border:1px solid rgba(45,212,191,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding:10px 14px; border-radius:14px;
  font-weight:700; color:var(--text); font-size:14px;
}

.hamburger{
  display:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
}
.hamburger svg{width:18px; height:18px}
.mobileMenu{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  padding:12px 0 18px;
}
.mobileMenu a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  color:var(--muted);
  font-weight:650;
}
.mobileMenu a:hover{background: rgba(255,255,255,.05); color:var(--text)}
.mobileMenu .grid{display:grid; grid-template-columns:1fr; gap:8px}

.hero{
  padding:46px 0 26px;
}
.heroCard{
  background: linear-gradient(135deg, rgba(15,25,48,.96), rgba(14,20,36,.88));
  border:1px solid rgba(255,255,255,.06);
  border-radius: calc(var(--radius) + 6px);
  padding:26px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.heroCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(500px 240px at 20% 10%, rgba(45,212,191,.22), transparent 60%),
    radial-gradient(520px 260px at 80% 0%, rgba(96,165,250,.22), transparent 62%);
  pointer-events:none;
}
.heroInner{position:relative; display:grid; grid-template-columns: 1.25fr .75fr; gap:22px; align-items:center}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  color:var(--muted);
  font-size:13px;
  width:fit-content;
}
.kicker .dot{width:10px; height:10px; border-radius:50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(45,212,191,.14)}
h1{
  margin:12px 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.lead{color:var(--muted); font-size: 16px; max-width: 58ch; margin: 0 0 14px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:750;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(45,212,191,.26), rgba(96,165,250,.18));
  border-color: rgba(45,212,191,.28);
}
.btn:hover{transform: translateY(-1px); transition: .18s ease; box-shadow: var(--shadow2)}
.small{font-size:13px; padding:10px 12px; border-radius:12px}

.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding:8px 10px;
  border-radius:999px;
}

.panel{
  background: rgba(14,20,36,.72);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:20px;
}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}

.section{padding:20px 0 42px}
.section h2{margin:0 0 10px; font-size:22px; letter-spacing:-.01em}
.section p{margin:0; color:var(--muted)}
.sectionHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px}

.card{
  background: rgba(15,25,48,.84);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow2);
}
.card h3{margin:8px 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}
.meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; color:var(--muted); font-size:12px}
.chip{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding:6px 9px;
  border-radius:999px;
}
.card a.more{display:inline-flex; gap:8px; align-items:center; margin-top:12px; font-weight:750; color:var(--text)}
.card a.more span{color:var(--brand)}

.searchRow{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:12px;
}
.searchRow input{
  flex:1;
  min-width: 220px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
}
.searchRow input:focus{box-shadow: 0 0 0 4px var(--ring); border-color: rgba(45,212,191,.35)}
.searchRow .hint{font-size:12px; color:var(--muted)}
.results{margin-top:12px; display:grid; grid-template-columns: repeat(2,1fr); gap:12px}
.result{
  padding:14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.result .title{font-weight:800}
.result .snippet{color:var(--muted); font-size:13px; margin-top:6px}
.result .date{color:var(--muted); font-size:12px; margin-top:8px}

.article{
  padding:34px 0 60px;
}
.articleHeader{
  max-width: 820px;
  margin:0 auto 18px;
}
.articleHeader h1{font-size: clamp(28px, 3.6vw, 42px); margin:0 0 10px}
.articleHeader .sub{color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.articleContent{
  max-width: 820px;
  margin:0 auto;
  background: rgba(15,25,48,.68);
  border:1px solid rgba(255,255,255,.06);
  border-radius: calc(var(--radius) + 2px);
  padding:22px;
  box-shadow: var(--shadow2);
}
.articleContent p{color:var(--text); opacity:.92; margin:0 0 14px}
.articleContent h2{margin:22px 0 10px; font-size:19px}
.articleContent ul{margin:10px 0 16px 20px}
.articleContent li{margin:8px 0; color:var(--text); opacity:.92}
.articleContent a{color: var(--brand)}
.articleContent .callout{
  margin:18px 0;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(45,212,191,.18);
  background: rgba(45,212,191,.08);
  color: var(--text);
}
.articleContent .divider{height:1px; background: rgba(255,255,255,.08); margin:18px 0}

.footer{
  padding:28px 0 40px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(7,10,18,.55);
}
.footerGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start}
.footer .smallprint{color:var(--muted); font-size:12px; margin-top:10px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}
.footerLinks{display:flex; flex-wrap:wrap; gap:10px}
.footerLinks a{padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03)}

.cookie{
  position:fixed; left:16px; right:16px; bottom:16px;
  background: rgba(14,20,36,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding:14px;
  display:none;
  z-index:200;
}
.cookie .row{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.cookie .txt{max-width: 70ch}
.cookie .txt strong{display:block; margin-bottom:4px}
.cookie .txt span{color:var(--muted); font-size:13px}
.cookie .actions{margin-top:0}
.cookie .btn{padding:10px 12px}

@media (max-width: 900px){
  .heroInner{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .results{grid-template-columns: 1fr}
  .menu{display:none}
  .hamburger{display:inline-flex}
  .mobileMenu.show{display:block}
}


/* === Revision 10 Article Polish === */
.articleShell{max-width: 980px; margin: 0 auto; padding: 24px 16px 64px;}
.articleHeader{margin: 18px auto 18px; max-width: 72ch;}
.articleHeader h1{letter-spacing:-0.02em; line-height:1.12; font-size: clamp(1.8rem, 3.2vw, 3rem); margin: 10px 0 10px;}
.articleMeta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color: var(--muted); font-size: 0.95rem;}
.articleMeta .chip{border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); padding: 6px 10px; border-radius: 999px;}
.articleContent.refined{max-width:72ch; margin: 0 auto; font-size: 1.06rem; line-height: 1.8;}
.articleContent.refined p{margin: 0 0 14px;}
.articleContent.refined p:first-of-type:not(.callout)::first-letter{font-size: 3.2em; line-height: 0.9; float:left; padding-right: 8px; padding-top: 6px; color: var(--accent);}
.articleContent.refined h2{margin: 26px 0 10px; font-size: 1.35rem; letter-spacing:-0.01em;}
.articleContent.refined h3{margin: 20px 0 8px; font-size: 1.15rem;}
.articleContent.refined a{color: var(--accent2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18);}
.articleContent.refined a:hover{border-bottom-color: rgba(255,255,255,0.45);}
.articleContent.refined .bullets{margin: 10px 0 18px 0; padding-left: 18px;}
.articleContent.refined .bullets li{margin: 10px 0; padding: 12px 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;}
.articleContent.refined .sourceLink{margin-top: 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03);}
.articleContent.refined .callout{border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(124,92,255,0.10), rgba(0,0,0,0)); padding: 14px 14px; margin: 12px 0 18px;}
.articleContent.refined blockquote{margin: 16px 0; padding: 14px 16px; border-left: 3px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); border-radius: 14px;}
.articleContent.refined hr{border:0; height:1px; background: rgba(255,255,255,0.10); margin: 22px 0;}
/* Search bar polish on article pages */
.searchBar{max-width:72ch; margin: 10px auto 14px; display:flex; gap:10px;}
.searchBar input{flex:1; padding: 12px 14px; border-radius: 14px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--text);}
.searchBar button{padding: 12px 14px; border-radius: 14px;}
@media (max-width: 720px){
  .articleContent.refined{font-size: 1.02rem;}
  .articleHeader{margin-top: 10px;}
}


/* --- Revision 10 polish: easier-on-the-eyes reading experience --- */
.articleHeader{max-width:760px}
.articleContent{
  max-width:760px;
  padding:30px;
  background: rgba(12,18,36,.72);
}
.articleContent p{
  font-size:18px;
  line-height:1.85;
  letter-spacing:.1px;
  margin:0 0 16px;
}
.articleContent li{font-size:18px; line-height:1.8; margin:8px 0}
.articleContent h2{font-size:22px; margin:28px 0 12px}
.articleContent h3{font-size:18px; margin:22px 0 10px; color:var(--text)}
.articleContent a{color:var(--accent); text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:3px}
.articleContent blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
}
.articleContent hr{border:0; height:1px; background: rgba(255,255,255,.08); margin:22px 0}
.articleContent .callout{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding:14px 16px;
  margin:18px 0;
}
@media (max-width:720px){
  .articleContent{padding:20px}
  .articleContent p,.articleContent li{font-size:16.5px}
}


/* ---- Readability upgrade ---- */
main.article, .article, .post { max-width: 760px; margin-left: auto; margin-right: auto; }
main.article { padding-left: 18px; padding-right: 18px; }
.article-content, .post-content, main.article { font-size: 18px; line-height: 1.85; letter-spacing: 0.01em; }
main.article h1 { letter-spacing: -0.02em; }
main.article p { margin: 0 0 1.05rem 0; }
main.article h2 { margin-top: 2.2rem; margin-bottom: 0.8rem; }
main.article h3 { margin-top: 1.6rem; margin-bottom: 0.6rem; }
main.article ul, main.article ol { margin: 0.25rem 0 1.1rem 1.2rem; }
main.article li { margin: 0.35rem 0; }
main.article blockquote { margin: 1.2rem 0; padding: 0.9rem 1rem; border-left: 4px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); border-radius: 12px; }
main.article .callout, main.article .note, main.article .tip { padding: 0.95rem 1rem; border-radius: 14px; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); margin: 1.2rem 0; }
main.article .sources, main.article .source-list { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.10); font-size: 0.95em; opacity: 0.95; }
main.article a { text-underline-offset: 3px; }