
:root{
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#f1f4f9; --text:#152033; --muted:#596579;
  --line:#d8dfeb; --accent:#0b63ce; --accent-2:#f7941d; --shadow:0 10px 28px rgba(17,24,39,.08);
}
[data-theme="dark"]{
  --bg:#0f1623; --surface:#182233; --surface-2:#202b3e; --text:#e8edf8; --muted:#aeb8cb;
  --line:#334057; --accent:#78b3ff; --accent-2:#ffb34d; --shadow:0 12px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);transition:.25s}
a{color:var(--accent)}
.container{max-width:1380px;margin:0 auto;padding:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.brand img{width:84px;height:84px;object-fit:contain}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.brand h1{margin:0;font-size:34px;line-height:1.05}
.brand p{margin:7px 0 0;color:var(--muted);max-width:820px}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.controls button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}
.main{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:16px}
.card,.sidebar-box,.category-card,.article-box,.nav-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.hero{overflow:hidden}
.hero img{display:block;width:100%;height:auto;border-radius:18px 18px 0 0}
.hero-copy{padding:22px}
.hero-copy h2{margin:0 0 12px;font-size:28px}
.hero-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.seo-article{padding:24px}
.seo-article h2{margin:0 0 14px;font-size:28px}
.seo-article p{font-size:17px;line-height:1.75;color:var(--text);margin:0 0 16px}
.seo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.seo-pill{padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:center;font-weight:700}
.categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.category-card{padding:20px}
.category-card h3{margin:0 0 8px;font-size:24px}
.category-card p{margin:0 0 14px;color:var(--muted);line-height:1.6}
.category-links{display:grid;gap:10px;margin:16px 0}
.link-row{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.site-logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:"Times New Roman",Times,serif;flex:0 0 44px}
.link-copy a{font-family:"Times New Roman",Times,serif;font-size:22px;font-weight:700;text-decoration:none;color:var(--accent)}
.link-copy a:hover{text-decoration:underline}
.link-copy p{margin:5px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.sidebar-box{padding:16px}
.sidebar-box h3{margin:0 0 12px}
.promo-ad{overflow:hidden}
.promo-ad a{display:block;text-decoration:none;color:inherit}
.promo-img img{display:block;width:100%;height:auto;border-radius:14px}
.promo-body{padding:12px 4px 6px}
.promo-body p{color:var(--muted);line-height:1.55}
.btn-buy{padding:9px 12px;background:var(--accent);color:#fff;border-radius:10px;font-weight:700}
.affiliate-stack{display:grid;gap:10px}
.affiliate-card a{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-decoration:none;color:inherit}
.affiliate-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1d4ed8,#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex:0 0 42px}
.affiliate-title{margin:0 0 4px;font-family:"Times New Roman",Times,serif;font-size:20px;font-weight:700;color:var(--text)}
.affiliate-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.nav-list{display:grid;gap:8px}
.nav-list a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-decoration:none;font-weight:700}
.footer-note{margin:20px 0 8px;color:var(--muted);font-size:14px}
.lang-en{display:inline}.lang-ru{display:none}
html[data-lang="ru"] .lang-en{display:none}
html[data-lang="ru"] .lang-ru{display:inline}
.back-link{display:inline-block;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none;font-weight:700}
.article-box{padding:24px}
.article-box h1{margin:0 0 10px;font-size:34px}
.article-box .lead{font-size:18px;color:var(--muted);line-height:1.7}
.breadcrumbs{margin-bottom:14px;color:var(--muted);font-size:14px}
.breadcrumbs a{text-decoration:none}
.ad-slot{min-height:600px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);border-radius:16px;background:var(--surface-2);color:var(--muted);text-align:center;padding:18px}
@media (max-width:1100px){.layout{grid-template-columns:1fr}.sidebar{order:2}.seo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.categories{grid-template-columns:1fr}.seo-grid{grid-template-columns:1fr}.brand h1{font-size:28px}}


.article-section{margin-top:22px}
.article-section h2,.article-section h3{margin:0 0 12px}
.article-section p{font-size:16px;line-height:1.78;color:var(--text);margin:0 0 14px}
.insight-list{display:grid;gap:10px;margin:14px 0}
.insight-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.insight-item strong{display:block;margin-bottom:6px;font-family:"Times New Roman",Times,serif;font-size:19px}
.article-ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.article-ad{padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.article-ad h3{margin:0 0 8px;font-family:"Times New Roman",Times,serif;font-size:23px}
.article-ad p{margin:0 0 12px;color:var(--muted);line-height:1.6}
.article-ad .btn{margin-top:4px}
.cta-strip{margin:22px 0;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--surface-2),var(--surface));}
.cta-strip h3{margin:0 0 8px;font-size:24px}
.cta-strip p{margin:0;color:var(--muted);line-height:1.7}
.faq-list{display:grid;gap:12px;margin-top:16px}
.faq-item{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.faq-item h4{margin:0 0 6px;font-size:18px;font-family:"Times New Roman",Times,serif}
.mini-ad-stack{display:grid;gap:10px}
@media (max-width:900px){.article-ad-grid{grid-template-columns:1fr}}

.info-sidebar p{margin:0 0 10px;color:var(--muted);line-height:1.7;font-size:15px}.site-footer{margin:28px 0 10px}.footer-inner{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);color:var(--muted);font-size:14px}.footer-inner a{text-decoration:none;font-weight:700}.footer-inner a:hover{text-decoration:underline}


/* Editorial / magazine refinement */
body{font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6;background:
  radial-gradient(circle at top left, rgba(247,148,29,.06), transparent 22%),
  radial-gradient(circle at top right, rgba(11,99,206,.05), transparent 18%),
  var(--bg)}
.brand,.hero,.seo-article,.category-card,.article-box,.sidebar-box,.footer-inner{backdrop-filter:saturate(110%) blur(2px)}
.article-box{
  position:relative;
  padding:34px 38px;
  border-radius:24px;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb, var(--surface) 84%, #f8e8cf 16%));
}
[data-theme="dark"] .article-box{
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb, var(--surface) 88%, #13253f 12%));
}
.article-box::before{
  content:"";
  position:absolute;left:38px;right:38px;top:0;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.breadcrumbs{letter-spacing:.03em;text-transform:uppercase;font-size:12px;color:var(--muted);margin:0 0 18px}
.article-box h1{
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(34px,4vw,52px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 16px;
  max-width:13ch;
}
.article-box .lead{
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  line-height:1.7;
  color:color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
  max-width:58ch;
  margin:0 0 26px;
}
.article-section{margin-top:34px;padding-top:10px;border-top:1px solid color-mix(in srgb, var(--line) 82%, transparent)}
.article-section h2,.article-section h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,3vw,34px);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 14px;
  max-width:24ch;
}
.article-section p,
.article-box > p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1.9;
  color:var(--text);
  max-width:72ch;
}
.article-section p + p{margin-top:14px}
.article-box .lead::first-letter,
.article-section:first-of-type p:first-of-type::first-letter{
  float:left;
  font-family:Georgia,"Times New Roman",serif;
  font-size:4.3em;
  line-height:.78;
  padding-right:10px;
  padding-top:6px;
  color:var(--accent);
}
.insight-list{gap:14px;margin:18px 0 10px}
.insight-item{
  position:relative;
  padding:18px 18px 18px 22px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb, var(--surface-2) 85%, #fff 15%));
}
.insight-item::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.insight-item strong{font-family:Georgia,"Times New Roman",serif;font-size:22px;margin-bottom:8px}
.cta-strip{
  padding:24px 26px;border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 10%, var(--surface)),color-mix(in srgb, var(--accent-2) 10%, var(--surface)));
}
.cta-strip h3,.article-ad h3,.seo-article h2,.category-card h3{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.015em;
}
.article-ad-grid{gap:18px;margin:28px 0}
.article-ad{
  border-radius:22px;
  padding:20px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--surface) 92%, #fff 8%),color-mix(in srgb, var(--surface-2) 88%, #fff 12%));
}
.link-copy a,.affiliate-title,.nav-list a{font-family:Georgia,"Times New Roman",serif}
.link-copy a{font-size:24px;line-height:1.15}
.link-row,.affiliate-card a,.nav-list a{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.link-row:hover,.affiliate-card a:hover,.nav-list a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(17,24,39,.08);border-color:color-mix(in srgb, var(--accent) 28%, var(--line))}
.faq-item{padding:18px 20px;border-radius:18px}
.faq-item h4{font-family:Georgia,"Times New Roman",serif;font-size:22px}
.hero-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:32px;letter-spacing:-.02em}
.hero-copy p,.seo-article p,.category-card p{font-size:17px;line-height:1.75}
@media (max-width:760px){
  .article-box{padding:26px 22px}
  .article-box::before{left:22px;right:22px}
  .article-box .lead{font-size:20px}
  .article-section p,.article-box>p{font-size:18px}
  .article-box h1{max-width:none}
}


/* Editorial cover banners and theme accents */
.article-cover{position:relative;overflow:hidden;border-radius:24px;padding:30px 28px;margin:10px 0 22px;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);background:linear-gradient(135deg,var(--cover-1),var(--cover-2));color:#fff}
.article-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 34%),radial-gradient(circle at 82% 30%,rgba(255,255,255,.16),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,0));pointer-events:none}
.article-cover::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(4px);pointer-events:none}
.cover-inner{position:relative;z-index:1;max-width:780px}
.cover-eyebrow{display:inline-block;margin-bottom:10px;padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.08)}
.cover-title{margin:0 0 12px;font-size:40px;line-height:1.02;font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#fff}
.cover-summary{margin:0;font-size:18px;line-height:1.72;color:rgba(255,255,255,.95);max-width:70ch}
.cover-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.cover-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:700}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-weight:700}
.article-box{padding:28px}
.article-box h1{display:none}
.article-box .lead{font-size:20px;line-height:1.8;font-family:Georgia,"Times New Roman",serif;color:var(--text)}
.article-box h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;line-height:1.15;margin:34px 0 12px}
.article-box h3{font-family:Georgia,"Times New Roman",serif;font-size:24px}
.article-box p,.article-box li{font-size:18px;line-height:1.86}
.article-box p:first-of-type::first-letter{float:left;font-size:3.2em;line-height:.88;padding-right:8px;font-family:Georgia,"Times New Roman",serif;color:var(--accent)}
.topic-callout{margin:22px 0;padding:18px 20px;border-left:4px solid var(--accent);background:linear-gradient(180deg,var(--surface-2),transparent);border-radius:0 16px 16px 0}
.topic-callout strong{display:block;margin-bottom:6px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.topic-promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.promo-panel{padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.promo-panel h3{margin:0 0 8px;font-size:20px}
.promo-panel p{margin:0 0 10px;color:var(--muted)}
.promo-panel a{font-weight:800;text-decoration:none}
.footer{margin-top:28px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer a{text-decoration:none;font-weight:700}
.topic-freeapps{--cover-1:#0b6bce;--cover-2:#39b2ff;--accent:#0b63ce}
.topic-nocode{--cover-1:#6d28d9;--cover-2:#c084fc;--accent:#7c3aed}
.topic-remote{--cover-1:#0f766e;--cover-2:#2dd4bf;--accent:#0f766e}
.topic-money{--cover-1:#a16207;--cover-2:#fbbf24;--accent:#ca8a04}
.topic-osint{--cover-1:#0f172a;--cover-2:#334155;--accent:#475569}
.topic-ai{--cover-1:#1d4ed8;--cover-2:#7c3aed;--accent:#4f46e5}
.topic-wealth{--cover-1:#9a3412;--cover-2:#fb923c;--accent:#ea580c}
.topic-content{--cover-1:#be185d;--cover-2:#f472b6;--accent:#db2777}
.topic-jobs{--cover-1:#166534;--cover-2:#4ade80;--accent:#16a34a}
.topic-starter{--cover-1:#92400e;--cover-2:#f59e0b;--accent:#d97706}
.topic-learning{--cover-1:#155e75;--cover-2:#22d3ee;--accent:#0891b2}
.topic-policy{--cover-1:#374151;--cover-2:#9ca3af;--accent:#6b7280}
@media(max-width:900px){.topic-promo-grid{grid-template-columns:1fr}.cover-title{font-size:32px}.cover-summary{font-size:17px}}
