/* CloudInspired modern skin, layered on top of the HitMag theme.
   Palette: brand red + deep black, with warm glows. The original logo is left untouched. */
:root {
  --ci-red: #e11d2e;
  --ci-red-2: #ff4d3d;        /* warm highlight for gradients */
  --ci-red-dark: #b3121f;
  --ci-glow: rgba(225, 29, 46, .45);
  --ci-black: #0b0b0f;
  --ci-black-2: #16161d;
  --ci-ink: #111827;
  --ci-text: #374151;
  --ci-muted: #6b7280;
  --ci-line: #e5e7eb;
  --ci-bg: #f4f5f8;
  --ci-card: #ffffff;
  --ci-radius: 14px;
  --ci-grad: linear-gradient(135deg, var(--ci-red) 0%, var(--ci-red-2) 100%);
  --ci-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 20px rgba(17,24,39,.06);
  --ci-shadow-hover: 0 10px 30px rgba(17,24,39,.12), 0 0 0 1px rgba(225,29,46,.18), 0 12px 40px -8px var(--ci-glow);
}

/* ---------- Base ---------- */
body, button, input, select, textarea,
.entry-title, h1, h2, h3, h4, h5, h6,
.main-navigation a, .widget-title, .hm-date {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body {
  color: var(--ci-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background:
    radial-gradient(1200px 500px at 85% -100px, rgba(225,29,46,.06), transparent 60%),
    radial-gradient(900px 400px at -10% 30%, rgba(255,77,61,.04), transparent 60%),
    var(--ci-bg);
  background-attachment: fixed;
}
.hitmag-wrapper, .site-content { background: transparent; }
a { color: var(--ci-red); transition: color .2s; }
a:hover { color: var(--ci-red-dark); }
::selection { background: var(--ci-red); color: #fff; }
.hm-container { max-width: 1200px; }
html { scrollbar-color: #c4c7cf transparent; }

/* Reading progress bar (browsers with scroll-driven animations; ignored elsewhere) */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
    background: var(--ci-grad); box-shadow: 0 0 12px var(--ci-glow);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: ci-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes ci-progress { to { transform: scaleX(1); } }
}

/* ---------- Top bar ---------- */
.hm-top-bar { background: var(--ci-black); border: 0; height: 34px; }
.hm-top-bar .hm-date { color: #9ca3af; font-weight: 500; font-size: 12px; letter-spacing: .04em; }
.hm-top-bar .hm-date::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: var(--ci-red-2); box-shadow: 0 0 8px var(--ci-red-2);
}

/* ---------- Header: original logo, unchanged ---------- */
.site-header { margin: 0; }
.header-main-area { background: #fff; padding: 10px 0 0; }
.site-branding { float: none; width: 100%; margin: 0; padding: 0; }
.hm-logo { display: block !important; float: none; }
.hm-logo img { display: block; width: 100%; height: auto; max-width: 1615px; }
.hm-header-sidebar { display: none; }

/* ---------- Navigation: black bar, white text, glowing accent ---------- */
.hm-nav-container {
  background: linear-gradient(180deg, var(--ci-black-2), var(--ci-black)) !important;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
}
.hm-nav-container::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ci-red) 20%, var(--ci-red-2) 50%, var(--ci-red) 80%, transparent);
  box-shadow: 0 0 14px var(--ci-glow); opacity: .9;
}
.main-navigation, .main-navigation ul, .main-navigation li { background: transparent !important; }
.main-navigation .hm-container { display: flex; align-items: center; }
.main-navigation a {
  color: #f3f4f6 !important; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  padding: 19px 18px !important; position: relative; transition: color .2s, text-shadow .2s;
}
.main-navigation a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 2px; border-radius: 2px;
  background: var(--ci-grad); transform: scaleX(0); transition: transform .25s ease; box-shadow: 0 0 10px var(--ci-glow);
}
.main-navigation a:hover { color: #fff !important; text-shadow: 0 0 14px rgba(255,255,255,.35); }
.main-navigation a:hover::after { transform: scaleX(1); }
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a {
  background: transparent !important; color: #fff !important;
}
.main-navigation .current_page_item > a::after, .main-navigation .current-menu-item > a::after { transform: scaleX(1); }
.hm-search-button-icon, .hm-search-button-icon:before { color: #f3f4f6 !important; transition: color .2s, text-shadow .2s; }
.hm-search-button-icon:hover:before { color: var(--ci-red-2) !important; text-shadow: 0 0 10px var(--ci-glow); }
.hm-search-box-container { background: var(--ci-black-2); border: 0; box-shadow: 0 16px 40px rgba(0,0,0,.35); }

/* ---------- Layout ---------- */
.site-content { padding-top: 40px; }
.home .site-main::before, .blog .site-main::before {
  content: "Latest Articles"; display: block; margin: 0 0 22px; color: var(--ci-ink);
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; padding-left: 16px;
  border-left: 4px solid var(--ci-red); line-height: 1.1;
}
.content-area .posts-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.content-area .posts-wrap::before, .content-area .posts-wrap::after { display: none; }

/* ---------- Post cards ---------- */
@keyframes ci-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.posts-wrap .hitmag-post {
  float: none !important; width: auto !important; margin: 0 !important; padding: 0;
  background: var(--ci-card); border-radius: var(--ci-radius); overflow: hidden; position: relative;
  box-shadow: var(--ci-shadow); transition: box-shadow .3s ease, transform .3s ease;
  display: flex; flex-direction: column; animation: ci-rise .6s ease both;
}
.posts-wrap .hitmag-post:nth-child(2) { animation-delay: .06s; }
.posts-wrap .hitmag-post:nth-child(3) { animation-delay: .12s; }
.posts-wrap .hitmag-post:nth-child(4) { animation-delay: .18s; }
.posts-wrap .hitmag-post:nth-child(n+5) { animation-delay: .24s; }
.posts-wrap .hitmag-post::after { /* glowing top edge on hover */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ci-grad);
  opacity: 0; transition: opacity .3s; box-shadow: 0 0 16px var(--ci-glow);
}
.posts-wrap .hitmag-post:hover { box-shadow: var(--ci-shadow-hover); transform: translateY(-5px); }
.posts-wrap .hitmag-post:hover::after { opacity: 1; }
.posts-wrap .archive-thumb { margin: 0; overflow: hidden; aspect-ratio: 16 / 9.9; position: relative; }
.posts-wrap .archive-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,15,.25)); opacity: 0; transition: opacity .3s;
}
.posts-wrap .hitmag-post:hover .archive-thumb::after { opacity: 1; }
.posts-wrap .archive-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.posts-wrap .hitmag-post:hover .archive-thumb img { transform: scale(1.05); }
.posts-wrap .archive-content { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.cat-links { margin-bottom: 10px; font-size: 0; } /* font-size 0 hides the " / " separators */
.cat-links a {
  display: inline-block; background: rgba(225,29,46,.08); color: var(--ci-red) !important; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; margin: 0 6px 6px 0;
  border: 1px solid rgba(225,29,46,.15); transition: background .2s, color .2s, box-shadow .2s;
}
.cat-links a:hover { background: var(--ci-grad); color: #fff !important; box-shadow: 0 4px 14px -4px var(--ci-glow); }
.posts-wrap .entry-title { font-size: 19px; font-weight: 750; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 10px; }
.entry-title a { color: var(--ci-ink) !important; background: linear-gradient(var(--ci-red), var(--ci-red)) 0 100% / 0 2px no-repeat; transition: background-size .35s, color .2s; }
.entry-title a:hover { color: var(--ci-red) !important; background-size: 100% 2px; }
.entry-meta, .entry-meta a { color: var(--ci-muted) !important; font-size: 13px; }
.posts-wrap .entry-summary { color: var(--ci-text); font-size: 15px; line-height: 1.6; }
.posts-wrap .th-readmore {
  margin-top: auto; align-self: flex-start; background: transparent !important; color: var(--ci-red) !important;
  border: 1px solid rgba(225,29,46,.35); border-radius: 999px; padding: 8px 16px !important;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; transition: all .25s;
}
.posts-wrap .th-readmore::after { content: " \2192"; display: inline-block; transition: transform .25s; }
.posts-wrap .th-readmore:hover { background: var(--ci-grad) !important; color: #fff !important; border-color: transparent; box-shadow: 0 6px 20px -6px var(--ci-glow); }
.posts-wrap .th-readmore:hover::after { transform: translateX(4px); }

/* ---------- Single article ---------- */
.single .site-main > article, .page .site-main > article {
  background: var(--ci-card); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow); padding: 40px 44px; position: relative; overflow: hidden;
}
.single .site-main > article::before, .page .site-main > article::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ci-grad); box-shadow: 0 0 18px var(--ci-glow);
}
.single .entry-header .entry-title, .page .entry-header .entry-title { font-size: 36px; font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--ci-ink); }
.entry-content { font-size: 17px; line-height: 1.8; color: var(--ci-text); }
.entry-content h2, .entry-content h3 { color: var(--ci-ink); font-weight: 750; letter-spacing: -.015em; margin-top: 1.7em; }
.entry-content h2 { padding-bottom: 8px; border-bottom: 1px solid var(--ci-line); }
.entry-content strong { color: var(--ci-ink); }
.entry-content a { text-decoration: underline; text-decoration-color: rgba(225,29,46,.35); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: var(--ci-red); }
.entry-content img, .entry-content iframe { border-radius: 12px; }
.entry-content iframe { box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); }
.entry-content blockquote { border-left: 4px solid var(--ci-red); background: rgba(225,29,46,.04); border-radius: 0 10px 10px 0; padding: 14px 20px; }
.entry-content pre, .entry-content code { background: var(--ci-black); color: #e5e7eb; border-radius: 8px; }
.entry-content code { padding: 2px 6px; font-size: .9em; }
.entry-content pre { padding: 16px 18px; border: 1px solid #23232c; }
.entry-content pre code { padding: 0; background: transparent; }
.post-navigation, .comments-area, .hm-authorbox {
  background: var(--ci-card); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
  padding: 24px 28px; margin-top: 28px; border: 0 !important;
}
.post-navigation .meta-nav { color: var(--ci-red); font-weight: 700; letter-spacing: .08em; }
.hm-related-posts:not(:has(article, li, .hm-rel-post)) { display: none; }
.hm-authorbox { display: flex; gap: 22px; align-items: flex-start; }
.hm-author-img img { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(225,29,46,.4); }
.author-name { color: var(--ci-ink); font-weight: 750; }
.author-description { font-size: 15px; line-height: 1.7; }

/* ---------- Sidebar ---------- */
.widget-area .widget {
  background: var(--ci-card); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
  padding: 22px 22px 18px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.widget-title, .widget .widget-title { border: 0 !important; margin-bottom: 14px; padding: 0; }
.widget-title span, .widget-title {
  font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .1em; color: var(--ci-ink) !important;
  border: 0 !important; background: none !important;
}
.widget-area .widget-title { display: flex; align-items: center; gap: 10px; }
.widget-area .widget-title::before {
  content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--ci-grad); box-shadow: 0 0 8px var(--ci-glow); flex: none;
}
.widget-title::after, .widget-title span::after { content: none !important; }
.widget ul li { border: 0; padding: 9px 0; border-bottom: 1px solid var(--ci-line); }
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--ci-ink); font-weight: 500; font-size: 14px; line-height: 1.45; transition: color .2s, padding .2s; display: inline-block; }
.widget-area .widget ul li a:hover { color: var(--ci-red); padding-left: 4px; }
.widget select { width: 100%; border: 1px solid var(--ci-line); border-radius: 10px; padding: 10px 12px; background: #fff; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=search], textarea, select.wpcf7-select {
  border: 1px solid var(--ci-line) !important; border-radius: 10px !important; padding: 11px 13px !important; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--ci-red) !important; box-shadow: 0 0 0 4px rgba(225,29,46,.14); outline: 0; }
.wpcf7-submit, input[type=submit] {
  background: var(--ci-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 12px 30px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em;
  cursor: pointer; box-shadow: 0 8px 22px -8px var(--ci-glow); transition: transform .2s, box-shadow .2s;
}
.wpcf7-submit:hover, input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--ci-glow); }
.wpcf7-response-output:empty { display: none; }

/* ---------- Pagination ---------- */
.navigation.pagination { margin-top: 36px; }
.navigation.pagination .page-numbers {
  border-radius: 10px; border: 1px solid var(--ci-line); background: #fff; color: var(--ci-ink); font-weight: 600;
  min-width: 42px; text-align: center; transition: all .2s;
}
.navigation.pagination .page-numbers.current, .navigation.pagination a.page-numbers:hover {
  background: var(--ci-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px var(--ci-glow);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ci-black); color: #9ca3af; margin-top: 56px; position: relative; }
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ci-red) 20%, var(--ci-red-2) 50%, var(--ci-red) 80%, transparent);
  box-shadow: 0 0 16px var(--ci-glow);
}
.site-footer .footer-widget-title, .site-footer .footer-widget-title a { color: #fff !important; font-weight: 800; letter-spacing: .02em; }
.site-footer a { color: #d1d5db !important; }
.site-footer a:hover { color: var(--ci-red-2) !important; }
.site-footer .widget ul li { border-color: rgba(255,255,255,.07); }
.site-footer .rss-widget-icon { display: none; }
.site-info { background: #050507; color: #6b7280; border: 0; }
.site-info a { color: #d1d5db !important; }
.site-info-designer { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .hm-container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; width: 100%; }
  #primary, .content-area, .site-main, #secondary, .widget-area { width: 100% !important; float: none !important; min-width: 0; }
  .content-area .posts-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home .site-main::before, .blog .site-main::before { font-size: 22px; }
  .single .site-main > article, .page .site-main > article { padding: 26px 20px; }
  .single .entry-header .entry-title, .page .entry-header .entry-title { font-size: 27px; }
  .hm-nav-container { position: static; }
  .hm-nwrap .navbutton, .hm-nwrap .navbutton:before, .main-nav-btn-lbl { color: #f3f4f6 !important; }
  .responsive-mainnav { background: var(--ci-black-2); }
  .responsive-mainnav a { color: #f3f4f6 !important; border-color: rgba(255,255,255,.08) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Menu items are floated by the theme, so make the bar contain them */
.hm-nav-container, .main-navigation, .main-navigation .hm-container { display: flow-root; }
.main-navigation .hm-container { display: flex; }
.main-navigation { background: linear-gradient(180deg, var(--ci-black-2), var(--ci-black)) !important; }
.cat-links, .entry-header .cat-links, .archive-content .cat-links { font-size: 0 !important; color: transparent; }

/* ---------- New logo: top-left, compact header ---------- */
.header-main-area { padding: 18px 0; border-bottom: 0; }
.header-main-area .hm-container { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; }
.site-branding { width: auto !important; flex: 0 1 auto; }
.hm-logo img { width: 340px !important; max-width: 100%; height: auto; transition: transform .25s, filter .25s; }
.hm-logo a:hover img { transform: translateY(-1px); filter: drop-shadow(0 6px 14px rgba(225,29,46,.25)); }
.hm-header-sidebar { display: block !important; float: none; width: auto; margin: 0; }
.hm-header-sidebar .widget { display: none; }
.ci-cta { display: flex !important; }
.ci-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
}
.ci-btn-primary { background: var(--ci-grad); color: #fff !important; box-shadow: 0 8px 22px -8px var(--ci-glow); }
.ci-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--ci-glow); color: #fff !important; }
@media (max-width: 768px) {
  .header-main-area .hm-container { justify-content: space-between; }
  .hm-logo img { width: 210px !important; }
  .ci-btn { padding: 9px 12px; font-size: 11px; }
}
@media (max-width: 420px) { .ci-cta { display: none !important; } }

/* =====================================================================
   Extras: showcase, search, TOC, share, copy, back-to-top, dark mode
   ===================================================================== */

/* Comments can't be posted on the static site, so hide the form and "Leave a comment" links */
.comment-respond, #respond { display: none !important; }
.entry-meta .comments-link:has(a[href$="#respond"]) { display: none !important; }
.entry-meta .meta-sep:has(+ .comments-link a[href$="#respond"]) { display: none; }
.comments-area:not(:has(.comment-list)) { display: none; }

/* ---------- Homepage showcase ---------- */
.ci-home .site-main::before { content: none !important; display: none !important; }
.ci-showcase { margin-bottom: 8px; }
.ci-hero {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  padding: 44px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #e5e7eb;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(225,29,46,.45), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(255,77,61,.18), transparent 70%),
    linear-gradient(135deg, #16161d, #0b0b0f 60%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: ci-rise .7s ease both;
}
.ci-hero::before { /* subtle grid texture */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.ci-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fca5a5; margin-bottom: 14px;
}
.ci-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ci-red-2); animation: ci-pulse 2s infinite; }
@keyframes ci-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,61,.6); } 70% { box-shadow: 0 0 0 10px rgba(255,77,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } }
.ci-hero .cat-links a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff !important; }
.ci-hero-title { font-size: 38px !important; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin: 6px 0 12px; }
.ci-hero-title a { color: #fff !important; background: none; }
.ci-hero-title a:hover { color: #fff !important; text-shadow: 0 0 24px rgba(255,77,61,.55); }
.ci-hero-meta { color: #9ca3af; font-size: 14px; margin: 0 0 24px; }
.ci-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ci-btn-ghost { background: rgba(255,255,255,.06); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ci-btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); color: #fff !important; }
.ci-hero-media { display: block; border-radius: 16px; overflow: hidden; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -10px rgba(225,29,46,.45);
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ci-hero:hover .ci-hero-media { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); }
.ci-hero-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.ci-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0 8px; }
.ci-stat { background: var(--ci-card); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow); padding: 20px 22px 20px 26px; position: relative; overflow: hidden; }
.ci-stat::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--ci-grad); box-shadow: 0 0 10px var(--ci-glow); }
.ci-stat strong { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: var(--ci-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ci-stat span { display: block; margin-top: 8px; color: var(--ci-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.ci-section-head h2 { margin: 36px 0 18px; color: var(--ci-ink); font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  padding-left: 16px; border-left: 4px solid var(--ci-red); line-height: 1.1; }
.ci-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ci-topic {
  display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: var(--ci-radius); background: var(--ci-card);
  box-shadow: var(--ci-shadow); text-decoration: none !important; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.ci-topic i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; margin-bottom: 10px;
  color: var(--ci-red); background: rgba(225,29,46,.08); transition: all .25s; }
.ci-topic-name { color: var(--ci-ink); font-weight: 700; font-size: 15px; }
.ci-topic-count { color: var(--ci-muted); font-size: 13px; }
.ci-topic:hover { transform: translateY(-4px); box-shadow: var(--ci-shadow-hover); }
.ci-topic:hover i { background: var(--ci-grad); color: #fff; box-shadow: 0 8px 20px -6px var(--ci-glow); }

/* ---------- Reading time + share ---------- */
.ci-readtime i { margin-right: 3px; }
.ci-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ci-line); }
.ci-share-label { font-weight: 800; color: var(--ci-ink); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.ci-share-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 600 13px/1 "Inter", sans-serif;
  color: var(--ci-ink) !important; background: var(--ci-card); border: 1px solid var(--ci-line); cursor: pointer; text-decoration: none !important; transition: all .2s;
}
.ci-share-btn:hover { background: var(--ci-grad); color: #fff !important; border-color: transparent; box-shadow: 0 6px 18px -6px var(--ci-glow); transform: translateY(-1px); }

/* ---------- Table of contents (desktop: sticky at the bottom of the sidebar) ---------- */
.ci-toc ol { list-style: none; margin: 0; padding: 0; }
.ci-toc li { border: 0 !important; padding: 0 !important; }
.ci-toc a { display: block; padding: 7px 0 7px 14px; font-size: 14px !important; font-weight: 500; color: var(--ci-muted) !important;
  border-left: 2px solid var(--ci-line); transition: all .2s; line-height: 1.4; }
.ci-toc .ci-toc-h3 a { padding-left: 28px; font-size: 13px !important; }
.ci-toc a:hover { color: var(--ci-ink) !important; }
.ci-toc a.active { color: var(--ci-red) !important; border-left-color: var(--ci-red); font-weight: 700; }
@media (min-width: 992px) {
  .ci-has-toc .site-content > .hm-container { display: flex; align-items: stretch; }
  .ci-has-toc .ci-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
}
@media (max-width: 991px) { .ci-toc { display: none; } }

/* ---------- Copy buttons on code ---------- */
.ci-has-copy { position: relative; }
.ci-copy { position: absolute; top: 8px; right: 8px; padding: 5px 10px; border-radius: 6px; border: 1px solid #2d2d38; background: #1d1d26; color: #e5e7eb;
  font: 600 12px/1 "Inter", sans-serif; cursor: pointer; opacity: .75; transition: all .2s; }
.ci-copy:hover { opacity: 1; border-color: var(--ci-red); }
.ci-copy.ok { background: #14532d; border-color: #22c55e; opacity: 1; }

/* ---------- Back to top ---------- */
.ci-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; z-index: 60;
  background: var(--ci-grad); color: #fff; font-size: 16px; box-shadow: 0 10px 24px -6px var(--ci-glow);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: all .3s; }
.ci-top.show { opacity: 1; transform: none; pointer-events: auto; }
.ci-top:hover { box-shadow: 0 14px 32px -6px var(--ci-glow), 0 0 0 6px rgba(225,29,46,.12); }

/* ---------- Theme toggle in the menu bar ---------- */
.ci-theme-toggle { margin-left: 14px; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #f3f4f6; cursor: pointer; display: grid; place-items: center; font-size: 15px; transition: all .25s; order: 99; align-self: center; }
.ci-theme-toggle:hover { border-color: var(--ci-red-2); color: #fff; box-shadow: 0 0 14px var(--ci-glow); }
.ci-theme-toggle .ci-i-light { display: none; }
[data-theme="dark"] .ci-theme-toggle .ci-i-light { display: inline; color: #fbbf24; }
[data-theme="dark"] .ci-theme-toggle .ci-i-dark { display: none; }
.main-navigation .menu-home-container { flex: 1; }
.hm-search-button-icon { cursor: pointer; }

/* ---------- Search modal ---------- */
.ci-noscroll { overflow: hidden; }
.ci-search-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.ci-search-modal.open { display: block; }
.ci-search-backdrop { position: absolute; inset: 0; background: rgba(5,5,8,.6); backdrop-filter: blur(6px); animation: ci-fade .2s ease; }
.ci-search-panel { position: relative; width: min(760px, calc(100% - 32px)); margin: 8vh auto 0; max-height: 80vh; overflow: auto; box-sizing: border-box;
  background: var(--ci-card); border-radius: 18px; padding: 18px 22px 22px; animation: ci-rise .25s ease;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(225,29,46,.25), 0 0 60px -20px var(--ci-glow); }
@keyframes ci-fade { from { opacity: 0; } }
.ci-search-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--ci-muted);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ci-search-close { border: 1px solid var(--ci-line); background: transparent; color: var(--ci-muted); border-radius: 6px; padding: 4px 8px; cursor: pointer; font: 600 11px "Inter", sans-serif; }
#ci-search { --pagefind-ui-primary: #e11d2e; --pagefind-ui-text: var(--ci-ink); --pagefind-ui-background: var(--ci-card);
  --pagefind-ui-border: var(--ci-line); --pagefind-ui-tag: rgba(225,29,46,.08); --pagefind-ui-border-radius: 10px; --pagefind-ui-font: "Inter", sans-serif; }
#ci-search .pagefind-ui__result-link { color: var(--ci-ink) !important; }
#ci-search .pagefind-ui__result-link:hover { color: var(--ci-red) !important; }
#ci-search mark { background: rgba(225,29,46,.18); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- Mobile tweaks for the extras ---------- */
@media (max-width: 991px) {
  .ci-hero { grid-template-columns: 1fr; padding: 30px 24px; gap: 26px; }
  .ci-hero-media { transform: none; order: -1; }
  .ci-hero-title { font-size: 28px !important; }
  .ci-stats, .ci-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ci-stat strong { font-size: 26px; }
  .ci-topic { padding: 16px; }
  .ci-theme-toggle { margin-left: 8px; }
}

/* =====================================================================
   Dark mode
   ===================================================================== */
[data-theme="dark"] {
  --ci-ink: #f3f4f6; --ci-text: #c9cdd6; --ci-muted: #8b919e; --ci-line: #262631;
  --ci-bg: #0a0a0e; --ci-card: #13131a;
  --ci-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  --ci-shadow-hover: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(225,29,46,.35), 0 12px 44px -6px var(--ci-glow);
  color-scheme: dark;
}
[data-theme="dark"] body {
  background: radial-gradient(1200px 500px at 85% -100px, rgba(225,29,46,.10), transparent 60%),
              radial-gradient(900px 400px at -10% 30%, rgba(255,77,61,.05), transparent 60%), var(--ci-bg);
}
[data-theme="dark"] .header-main-area { background: #0f0f14; }
[data-theme="dark"] .entry-content, [data-theme="dark"] .entry-content p, [data-theme="dark"] .entry-content li { color: var(--ci-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5,
[data-theme="dark"] .entry-content strong, [data-theme="dark"] .page-title, [data-theme="dark"] .post-navigation a,
[data-theme="dark"] .author-name { color: var(--ci-ink) !important; }
[data-theme="dark"] .ci-hero-title a { color: #fff !important; }
[data-theme="dark"] .cat-links a { background: rgba(225,29,46,.14); border-color: rgba(225,29,46,.3); color: #ff8a80 !important; }
[data-theme="dark"] .ci-topic i { background: rgba(225,29,46,.14); color: #ff6b5e; }
[data-theme="dark"] a { color: #ff6b5e; }
[data-theme="dark"] .entry-content a { color: #ff7a6e; }
[data-theme="dark"] .posts-wrap .th-readmore { color: #ff6b5e !important; border-color: rgba(255,107,94,.4); }
[data-theme="dark"] input[type=text], [data-theme="dark"] input[type=email], [data-theme="dark"] input[type=search],
[data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .widget select {
  background: #0d0d12 !important; color: var(--ci-ink) !important; border-color: var(--ci-line) !important; }
[data-theme="dark"] .navigation.pagination .page-numbers { background: var(--ci-card); color: var(--ci-ink); border-color: var(--ci-line); }
[data-theme="dark"] .hm-author-img img { box-shadow: 0 0 0 3px var(--ci-card), 0 0 0 5px rgba(225,29,46,.5); background: #fff; }
[data-theme="dark"] .ci-search-backdrop { background: rgba(0,0,0,.7); }
[data-theme="dark"] table td, [data-theme="dark"] table th { border-color: var(--ci-line); }
[data-theme="dark"] .widget, [data-theme="dark"] .widget p, [data-theme="dark"] .textwidget { color: var(--ci-text); }

/* ---------- Fixes: menu bar icons, title size, sidebar gap ---------- */
.main-navigation .hm-container { position: relative; }
.hm-search-button-icon { position: relative !important; top: auto !important; right: auto !important; float: none !important;
  order: 98; align-self: center; width: 38px; height: 38px; display: grid !important; place-items: center; margin-left: 10px; border-radius: 50%; transition: background .2s; }
.hm-search-button-icon:hover { background: rgba(255,255,255,.08); }
.hm-search-box-container { display: none !important; }
.hitmag-single .entry-header .entry-title, .single .entry-header .entry-title, .page .entry-header .entry-title { font-size: 38px !important; line-height: 1.15 !important; }
.entry-content h2 { font-size: 27px !important; line-height: 1.25; }
.entry-content h3 { font-size: 21px !important; line-height: 1.3; }
@media (min-width: 992px) {
  .ci-has-toc .site-content > .hm-container { gap: 32px; }
  .ci-has-toc #primary { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  .ci-has-toc #secondary { flex: 0 0 345px; margin: 0 !important; }
}
@media (max-width: 768px) {
  .hitmag-single .entry-header .entry-title, .single .entry-header .entry-title, .page .entry-header .entry-title { font-size: 28px !important; }
  .entry-content h2 { font-size: 23px !important; }
}
@media (max-width: 768px) {
  .hm-nav-container { position: relative !important; }
  .main-navigation { position: absolute !important; top: 0; right: 0; bottom: 0; width: auto !important; background: none !important; z-index: 2; }
  .main-navigation .hm-container { height: 100%; padding: 0 12px 0 0; width: auto; }
  .main-navigation .menu-home-container { display: none; }
}
@media (max-width: 768px) {
  .main-navigation { bottom: auto !important; height: 46px; }
}

/* Stats strip sits directly under the menu, above the hero */
.ci-stats { grid-template-columns: repeat(3, 1fr) !important; margin: 0 0 24px !important; }
@media (max-width: 600px) {
  .ci-stats { gap: 10px; }
  .ci-stat { padding: 14px 12px 14px 16px; }
  .ci-stat strong { font-size: 24px; }
  .ci-stat span { font-size: 10px; letter-spacing: .04em; }
}

/* Keep the site title (the homepage h1) available to search engines and screen readers, just not shown */
.hm-site-title { display: block !important; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }