:root{--bg:#070b16;--panel:#0d1428;--card:#111b35;--card2:#0b1122;--border:#203058;--text:#eaf2ff;--muted:#9fb2d1;--brand:#61dafb;--violet:#a78bfa;--green:#34d399;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(900px 450px at 15% -5%,rgba(97,218,251,.18),transparent),radial-gradient(800px 450px at 85% 0%,rgba(167,139,250,.17),transparent),linear-gradient(180deg,#070b16,#0b1020 35%,#070b16)}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.container{width:min(1220px,calc(100% - 32px));margin:auto}.top-progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--brand),var(--violet),var(--green));z-index:1000}.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(32,48,88,.55)}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{font-weight:950;letter-spacing:.3px;font-size:22px;color:#fff}.navlinks{display:flex;gap:14px;align-items:center}.navlinks a{color:var(--muted);font-weight:650}.navlinks a:hover{color:#fff}.search-form{display:flex;gap:8px}.search-form input{width:min(340px,36vw);border:1px solid var(--border);background:rgba(13,20,40,.8);color:#fff;border-radius:999px;padding:11px 14px}.btn,.search-form button{border:1px solid rgba(97,218,251,.35);background:linear-gradient(135deg,rgba(97,218,251,.16),rgba(167,139,250,.13));color:#fff;border-radius:999px;padding:11px 15px;font-weight:800;cursor:pointer}.hero{padding:56px 0 26px}.hero-box{border:1px solid rgba(32,48,88,.8);border-radius:32px;padding:38px;background:radial-gradient(700px 270px at 5% 0%,rgba(97,218,251,.22),transparent),radial-gradient(600px 260px at 90% 10%,rgba(167,139,250,.21),transparent),linear-gradient(135deg,rgba(17,27,53,.9),rgba(5,8,18,.92));box-shadow:0 30px 80px rgba(0,0,0,.42)}.hero h1{font-size:clamp(38px,6vw,74px);line-height:1.02;margin:0 0 16px;letter-spacing:-1.8px}.hero p{max-width:820px;color:var(--muted);font-size:18px;line-height:1.7}.chips,.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.chip,.tab,.badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid rgba(32,48,88,.85);background:rgba(13,20,40,.72);border-radius:999px;color:var(--muted);font-size:13px}.tab{font-size:14px}.tab.active,.tab:hover,.badge.hot{color:#fff;border-color:rgba(97,218,251,.42);background:rgba(17,27,53,.94);text-decoration:none}.section-title{font-size:22px;font-weight:900;margin:28px 0 14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.card{position:relative;overflow:hidden;border:1px solid rgba(32,48,88,.85);background:linear-gradient(180deg,rgba(17,27,53,.94),rgba(11,17,34,.96));border-radius:var(--radius);padding:20px;transition:.25s;min-height:190px}.card:hover{transform:translateY(-5px);border-color:rgba(97,218,251,.45);box-shadow:0 24px 60px rgba(0,0,0,.36)}.card h2{position:relative;margin:12px 0 10px;font-size:20px}.card p{position:relative;color:var(--muted);line-height:1.65;margin:0}.meta{position:relative;display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px}.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.hub-card{border:1px solid rgba(32,48,88,.85);border-radius:24px;padding:22px;background:rgba(13,20,40,.68)}.layout{display:grid;grid-template-columns:1fr;gap:22px;margin:26px 0}@media(min-width:1040px){.layout{grid-template-columns:minmax(0,1fr) 310px}}.article{border:1px solid rgba(32,48,88,.88);border-radius:32px;background:rgba(17,27,53,.74);padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.28)}.article h1{font-size:clamp(32px,4.5vw,56px);line-height:1.05;margin:12px 0 16px;letter-spacing:-1px}.article-cover{width:100%;height:auto;border-radius:22px;margin:18px 0;border:1px solid rgba(32,48,88,.8)}.video-wrap{position:relative;padding-top:56.25%;border-radius:22px;overflow:hidden;border:1px solid var(--border);margin:18px 0;background:#000}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.prose{font-size:17px;line-height:1.9}.prose p{color:#dbe7ff}.prose h2{margin-top:34px}.prose h3{margin-top:26px}.prose img{max-width:100%;height:auto;border-radius:16px;border:1px solid rgba(32,48,88,.7);display:block;margin:18px auto}.prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--border);padding:10px}.prose blockquote{border-left:4px solid var(--brand);padding:12px 16px;background:rgba(13,20,40,.7);border-radius:16px;color:#dbe7ff}.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.prose p code,.prose li code{background:#091020;border:1px solid var(--border);padding:2px 7px;border-radius:8px}pre{position:relative;border-radius:18px;border:1px solid var(--border);overflow:auto}.copy-btn{position:absolute;right:10px;top:10px;border:1px solid var(--border);background:#0d1428;color:#fff;border-radius:10px;padding:6px 9px;cursor:pointer}.toc{position:sticky;top:92px;border:1px solid var(--border);background:rgba(13,20,40,.76);backdrop-filter:blur(12px);border-radius:22px;padding:14px;height:fit-content}.toc-title{font-weight:900;margin:4px 8px 10px}.toc a{display:block;color:var(--muted);padding:8px 10px;border-radius:12px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toc a:hover,.toc a.active{background:#0b1122;color:#fff;text-decoration:none}.toc-l3{padding-left:22px!important}.ad-slot{border:1px dashed rgba(97,218,251,.35);border-radius:20px;min-height:96px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(13,20,40,.42);margin:22px 0}.profile-book{display:grid;grid-template-columns:1fr;gap:18px}@media(min-width:900px){.profile-book{grid-template-columns:1fr 1fr}}.footer{margin-top:60px;border-top:1px solid rgba(32,48,88,.7);padding:30px 0;color:var(--muted)}@media(max-width:760px){.nav{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}.navlinks{flex-wrap:wrap}.search-form input{width:70vw}.hero-box{padding:26px}.article{padding:20px}}



/* ============================
   V5 ARTICLE LAYOUT FIX
   Better alignment for blog pages
   ============================ */

body {
  overflow-x: hidden;
}

/* Header should feel centered and not stretched awkwardly */
.site-header .container.nav {
  width: min(1320px, calc(100% - 64px));
}

.nav {
  min-height: 74px;
}

.logo {
  min-width: 190px;
}

.navlinks {
  flex: 1;
  justify-content: center;
}

.search-form {
  min-width: 360px;
  justify-content: flex-end;
}

.search-form input {
  width: 300px;
}

/* Main article layout */
.layout {
  width: min(1240px, calc(100% - 64px));
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 820px) 280px;
  gap: 36px;
  align-items: start;
}

.article {
  width: 100%;
  max-width: 820px;
  padding: 34px 38px;
  border-radius: 28px;
}

.article h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  max-width: 760px;
}

/* Reduce excessive image height/white area impact */
.article-cover {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: #ffffff;
  padding: 18px;
  border-radius: 24px;
  margin: 24px auto;
  display: block;
}

/* Better text width */
.prose {
  max-width: 760px;
}

.prose p,
.prose li {
  color: #dbe7ff;
  font-size: 17px;
}

.prose h2 {
  font-size: 28px;
  line-height: 1.25;
}

.prose h3 {
  font-size: 22px;
  line-height: 1.3;
}

/* TOC should not look floating awkwardly */
.toc {
  width: 280px;
  top: 96px;
  padding: 16px;
  border-radius: 22px;
}

.toc-title {
  font-size: 16px;
}

.toc a {
  line-height: 1.35;
}

/* Cards and hub sections should stay centered */
.container > .grid,
.container > .hub-grid,
.container > .tabs,
.container > .profile-book,
.container > .section-title,
.container > .ad-slot {
  max-width: 1240px;
}

/* Make ad placeholders less intrusive while testing */
.ad-slot {
  min-height: 72px;
  opacity: .75;
}

/* Responsive cleanup */
@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
    width: min(900px, calc(100% - 36px));
    gap: 20px;
  }

  .article {
    max-width: none;
    padding: 28px 26px;
  }

  .toc {
    position: relative;
    top: auto;
    width: 100%;
    order: -1;
  }

  .toc a {
    display: inline-block;
    margin: 3px;
  }

  .nav {
    gap: 12px;
  }

  .search-form {
    min-width: 280px;
  }

  .search-form input {
    width: 240px;
  }
}

@media (max-width: 800px) {
  .site-header .container.nav {
    width: min(100% - 28px, 760px);
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 0;
  }

  .logo {
    min-width: auto;
  }

  .navlinks {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .search-form {
    min-width: 0;
    width: 100%;
  }

  .search-form input {
    width: 100%;
  }

  .layout {
    width: min(100% - 24px, 720px);
    margin-top: 18px;
  }

  .article {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .article h1 {
    font-size: 34px;
  }

  .article-cover {
    max-height: 430px;
    padding: 10px;
  }
}



/* ============================
   Logo integration
   ============================ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.brand-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(97,218,251,.18), 0 12px 28px rgba(0,0,0,.25);
}

.brand-logo span {
  font-weight: 950;
  letter-spacing: .2px;
}

@media (max-width: 800px) {
  .brand-logo img {
    width: 40px;
    height: 40px;
  }
}



/* =========================================================
   V6 FINAL CONTENT-FIRST BLOG LAYOUT
   Fixes wasted right space from TOC sidebar.
   ========================================================= */

/* Overall article page should be content-first */
.layout {
  width: min(1120px, calc(100% - 56px)) !important;
  margin: 34px auto 0 !important;
  display: block !important;
}

/* Article becomes the main page container */
.article {
  max-width: 1120px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 42px 52px !important;
  border-radius: 30px !important;
}

/* Title should be big but not absurdly huge */
.article h1 {
  max-width: 980px !important;
  font-size: clamp(36px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.2px !important;
}

/* Move TOC from right sidebar to compact top box */
.toc {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 18px !important;
  padding: 14px 18px !important;
  border-radius: 22px !important;
  display: block !important;
  background: rgba(13,20,40,.72) !important;
}

/* Because post.php outputs article first and toc second,
   visually bring TOC above article */
.layout {
  display: flex !important;
  flex-direction: column !important;
}

.toc {
  order: -1 !important;
}

.toc-title {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  color: #eaf2ff !important;
}

/* TOC links as horizontal chips */
.toc a {
  display: inline-flex !important;
  max-width: none !important;
  white-space: normal !important;
  margin: 4px 6px 4px 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(32,48,88,.8) !important;
  background: rgba(7,11,22,.45) !important;
  border-radius: 999px !important;
  line-height: 1.25 !important;
}

.toc a:hover,
.toc a.active {
  background: rgba(97,218,251,.12) !important;
  border-color: rgba(97,218,251,.45) !important;
}

.toc-l3 {
  padding-left: 12px !important;
}

/* Prose should use most of the article width */
.prose {
  max-width: 100% !important;
}

.prose p,
.prose li {
  max-width: 930px !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
}

.prose h2,
.prose h3,
.prose h4 {
  max-width: 960px !important;
}

/* Code blocks should be wide and readable */
.prose pre,
pre {
  width: 100% !important;
  max-width: 100% !important;
  margin: 22px 0 !important;
}

/* Ad placeholders should not dominate testing */
.ad-slot {
  min-height: 64px !important;
  margin: 24px 0 !important;
  font-size: 15px !important;
}

/* Cover image should not create huge awkward whitespace */
.article-cover {
  max-width: 820px !important;
  max-height: 520px !important;
  object-fit: contain !important;
  margin: 24px auto 30px !important;
  display: block !important;
}

/* Header balance */
.site-header .container.nav {
  width: min(1400px, calc(100% - 64px)) !important;
}

.navlinks {
  gap: 18px !important;
}

.search-form input {
  width: 340px !important;
}

/* Related cards inside article */
.article .grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .layout {
    width: min(100% - 24px, 760px) !important;
    margin-top: 18px !important;
  }

  .article {
    padding: 24px 18px !important;
    border-radius: 22px !important;
  }

  .article h1 {
    font-size: 34px !important;
  }

  .toc {
    width: min(100% - 24px, 760px) !important;
    padding: 12px !important;
  }

  .toc a {
    font-size: 13px !important;
  }

  .prose p,
  .prose li {
    font-size: 16.5px !important;
  }

  .search-form input {
    width: 100% !important;
  }
}



/* =========================================================
   V7 CLEAN DOCS HUB LAYOUT
   Fixes: huge left-heavy hero, wasted right space, tab clutter,
   bad spacing between tabs/cards.
   ========================================================= */

/* More controlled global width */
.container {
  width: min(1180px, calc(100% - 48px)) !important;
}

/* Header tighter and more balanced */
.site-header .container.nav {
  width: min(1180px, calc(100% - 48px)) !important;
}

.nav {
  min-height: 68px !important;
}

.brand-logo img {
  width: 38px !important;
  height: 38px !important;
}

.logo,
.brand-logo span {
  font-size: 22px !important;
}

.navlinks {
  gap: 16px !important;
}

.search-form {
  min-width: 320px !important;
}

.search-form input {
  width: 270px !important;
}

/* Category / hub hero should be compact, not giant */
.hero {
  padding: 32px 0 18px !important;
}

.hero-box {
  width: min(1180px, calc(100% - 0px)) !important;
  min-height: auto !important;
  padding: 34px 38px !important;
  border-radius: 28px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 28px !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative right panel to use blank space nicely */
.hero-box::after {
  content: "";
  justify-self: end;
  width: 300px;
  height: 180px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 30%, rgba(97,218,251,.35), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(167,139,250,.30), transparent 32%),
    linear-gradient(135deg, rgba(13,20,40,.52), rgba(7,11,22,.30));
  border: 1px solid rgba(97,218,251,.13);
  box-shadow: inset 0 0 40px rgba(97,218,251,.06);
}

.hero h1 {
  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  margin: 10px 0 12px !important;
  letter-spacing: -1.4px !important;
}

.hero p {
  font-size: 18px !important;
  line-height: 1.55 !important;
  max-width: 680px !important;
  margin: 0 !important;
}

.hero .badge,
.hero .chip {
  width: fit-content !important;
}

/* Tabs should be inside controlled content width with sane spacing */
.tabs {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 22px auto 18px !important;
  padding: 0 !important;
  gap: 10px !important;
  align-items: center !important;
}

.tab {
  padding: 8px 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Cards should start after clear spacing, not collide with tabs */
.grid {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.card {
  min-height: 210px !important;
  padding: 22px !important;
  border-radius: 22px !important;
}

.card h2 {
  font-size: 21px !important;
  line-height: 1.25 !important;
  margin-top: 14px !important;
}

/* Section titles aligned with cards */
.section-title {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 30px auto 16px !important;
}

/* Hub grid on homepage */
.hub-grid,
.profile-book {
  width: min(1180px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ad slots aligned and less noisy */
.ad-slot {
  width: min(1180px, 100%) !important;
  margin: 24px auto !important;
  min-height: 58px !important;
}

/* Category page specifically */
body:has(.hero-box) .container > .grid {
  margin-top: 20px !important;
}

/* Article page should remain content-first but not oversized */
.layout {
  width: min(1060px, calc(100% - 48px)) !important;
}

.article {
  max-width: 1060px !important;
  padding: 38px 46px !important;
}

.toc {
  max-width: 1060px !important;
}

/* Better mobile/tablet layout */
@media (max-width: 1100px) {
  .hero-box {
    grid-template-columns: 1fr !important;
  }

  .hero-box::after {
    display: none !important;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .search-form {
    min-width: 260px !important;
  }

  .search-form input {
    width: 220px !important;
  }
}

@media (max-width: 760px) {
  .container,
  .site-header .container.nav,
  .tabs,
  .grid,
  .section-title,
  .hub-grid,
  .profile-book,
  .layout {
    width: min(100% - 24px, 720px) !important;
  }

  .hero {
    padding: 20px 0 8px !important;
  }

  .hero-box {
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }

  .hero h1 {
    font-size: 38px !important;
  }

  .hero p {
    font-size: 16px !important;
  }

  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
  }

  .tab {
    white-space: nowrap !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .article {
    padding: 24px 18px !important;
  }
}



/* =========================================================
   V8 COMPANY-GRADE POLISH
   Corporate-grade visual system for MySQLGyan.
   ========================================================= */

:root {
  --company-bg: #050816;
  --company-surface: rgba(12, 18, 38, .82);
  --company-surface-2: rgba(18, 28, 56, .88);
  --company-border: rgba(83, 118, 183, .28);
  --company-border-strong: rgba(97, 218, 251, .34);
  --company-text: #eef6ff;
  --company-muted: #a9b8d4;
  --company-blue: #67e8f9;
  --company-purple: #a78bfa;
  --company-green: #34d399;
  --company-shadow: 0 28px 90px rgba(0,0,0,.36);
}

/* cleaner body background */
body {
  background:
    radial-gradient(900px 380px at 10% -8%, rgba(103,232,249,.18), transparent 55%),
    radial-gradient(820px 400px at 90% -3%, rgba(167,139,250,.18), transparent 55%),
    linear-gradient(180deg, #050816 0%, #081122 42%, #050816 100%) !important;
}

/* header as a real SaaS/company navbar */
.site-header {
  background: rgba(5,8,22,.82) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(83,118,183,.20) !important;
}

.site-header .container.nav {
  width: min(1260px, calc(100% - 56px)) !important;
}

.nav {
  min-height: 76px !important;
}

.brand-logo {
  padding: 8px 10px !important;
  border-radius: 999px !important;
}

.brand-logo:hover {
  background: rgba(255,255,255,.035) !important;
  text-decoration: none !important;
}

.brand-logo img {
  width: 42px !important;
  height: 42px !important;
  box-shadow: 0 0 0 1px rgba(103,232,249,.25), 0 10px 24px rgba(0,0,0,.35) !important;
}

.brand-logo span {
  font-size: 24px !important;
  font-weight: 950 !important;
}

.navlinks a {
  padding: 8px 10px !important;
  border-radius: 999px !important;
  transition: .18s ease !important;
}

.navlinks a:hover {
  background: rgba(255,255,255,.04) !important;
  text-decoration: none !important;
}

.search-form input {
  border-color: rgba(83,118,183,.35) !important;
  background: rgba(7,12,28,.72) !important;
}

.search-form button, .btn {
  background: linear-gradient(135deg, rgba(103,232,249,.24), rgba(167,139,250,.18)) !important;
  border-color: rgba(103,232,249,.42) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
}

/* homepage company hero */
.company-hero {
  padding: 54px 0 28px !important;
}

.company-hero-box {
  width: min(1260px, calc(100% - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: 34px;
  align-items: stretch;
}

.company-hero-main {
  border: 1px solid var(--company-border);
  border-radius: 34px;
  padding: 46px;
  background:
    radial-gradient(700px 330px at 8% 0%, rgba(103,232,249,.24), transparent 58%),
    radial-gradient(650px 320px at 86% 22%, rgba(167,139,250,.22), transparent 58%),
    linear-gradient(135deg, rgba(18,28,56,.92), rgba(6,10,24,.96));
  box-shadow: var(--company-shadow);
  position: relative;
  overflow: hidden;
}

.company-hero-main::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -110px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103,232,249,.20), transparent 65%);
  pointer-events: none;
}

.company-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dff9ff;
  border: 1px solid rgba(103,232,249,.38);
  background: rgba(103,232,249,.08);
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 20px;
}

.company-hero-main h1 {
  margin: 0;
  font-size: clamp(44px, 5.8vw, 82px);
  line-height: .98;
  letter-spacing: -2.2px;
  max-width: 840px;
}

.company-hero-main p {
  color: var(--company-muted);
  max-width: 760px;
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.7;
}

.company-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.company-cta-secondary {
  border: 1px solid rgba(83,118,183,.36);
  background: rgba(7,12,28,.55) !important;
}

.company-hero-side {
  display: grid;
  gap: 16px;
}

.company-metric-card {
  border: 1px solid var(--company-border);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18,28,56,.88), rgba(9,14,30,.92));
  padding: 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.company-metric-card strong {
  display: block;
  font-size: 30px;
  letter-spacing: -.6px;
  color: #fff;
}

.company-metric-card span {
  display: block;
  margin-top: 6px;
  color: var(--company-muted);
  line-height: 1.5;
}

/* trust strip */
.trust-strip {
  width: min(1260px, calc(100% - 56px));
  margin: 18px auto 0;
  border: 1px solid rgba(83,118,183,.22);
  border-radius: 24px;
  padding: 16px 18px;
  background: rgba(12,18,38,.50);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.trust-strip span {
  color: var(--company-muted);
  font-weight: 750;
  font-size: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}

/* company sections */
.company-section {
  width: min(1260px, calc(100% - 56px));
  margin: 34px auto 0;
}

.company-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.company-section-head h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.5px;
}

.company-section-head p {
  margin: 6px 0 0;
  color: var(--company-muted);
  max-width: 680px;
  line-height: 1.6;
}

.company-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.company-feature-card {
  border: 1px solid var(--company-border);
  border-radius: 26px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(18,28,56,.78), rgba(8,13,28,.88));
  min-height: 230px;
  transition: .22s ease;
}

.company-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--company-border-strong);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  text-decoration: none;
}

.company-feature-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(103,232,249,.10);
  border: 1px solid rgba(103,232,249,.22);
}

.company-feature-card h3 {
  color: var(--company-text);
  margin: 0 0 8px;
  font-size: 21px;
}

.company-feature-card p {
  color: var(--company-muted);
  margin: 0;
  line-height: 1.65;
}

.company-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.company-panel {
  border: 1px solid var(--company-border);
  border-radius: 28px;
  padding: 28px;
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(103,232,249,.11), transparent),
    linear-gradient(180deg, rgba(18,28,56,.78), rgba(8,13,28,.90));
}

.company-panel h2 {
  margin: 0 0 12px;
  font-size: 26px;
}

.company-panel p {
  color: var(--company-muted);
  line-height: 1.7;
}

.company-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.company-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(83,118,183,.16);
  color: #dbe7ff;
}

.company-list li::before {
  content: "✓";
  color: var(--company-green);
  margin-right: 10px;
  font-weight: 900;
}

/* improve regular grids/cards too */
.grid {
  gap: 20px !important;
}

.card {
  border-color: rgba(83,118,183,.27) !important;
  background:
    radial-gradient(300px 120px at 10% 0%, rgba(103,232,249,.07), transparent),
    linear-gradient(180deg, rgba(18,28,56,.86), rgba(9,14,30,.94)) !important;
}

/* category hero more professional */
.hero-box {
  box-shadow: var(--company-shadow) !important;
  border-color: rgba(83,118,183,.27) !important;
}

/* footer as company footer */
.footer {
  margin-top: 70px !important;
  background: rgba(5,8,22,.65);
  border-top: 1px solid rgba(83,118,183,.22) !important;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 1050px) {
  .company-hero-box,
  .company-two-col {
    grid-template-columns: 1fr;
  }

  .company-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-hero-main {
    padding: 36px;
  }
}

@media (max-width: 720px) {
  .company-hero-box,
  .company-section,
  .trust-strip {
    width: min(100% - 24px, 720px);
  }

  .company-hero-main {
    padding: 28px 22px;
    border-radius: 26px;
  }

  .company-hero-main h1 {
    font-size: 42px;
  }

  .company-grid-3 {
    grid-template-columns: 1fr;
  }

  .company-section-head {
    display: block;
  }

  .company-metric-card strong {
    font-size: 26px;
  }
}


/* =========================================================
   V9 FIXED DOCS/CATEGORY PAGES
   Dedicated professional docs layout for /category and /hub.
   ========================================================= */
.docs-hero-wrap{width:min(1180px,calc(100% - 48px));margin:34px auto 0}
.docs-hero{border:1px solid rgba(83,118,183,.28);border-radius:28px;padding:34px 36px;background:radial-gradient(520px 240px at 10% 0%,rgba(103,232,249,.16),transparent 60%),radial-gradient(520px 240px at 92% 10%,rgba(167,139,250,.12),transparent 58%),linear-gradient(135deg,rgba(18,28,56,.88),rgba(6,10,24,.94));box-shadow:0 24px 72px rgba(0,0,0,.28);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center}
.docs-hero-content{min-width:0}
.docs-kicker{display:inline-flex;align-items:center;width:fit-content;padding:8px 13px;border-radius:999px;border:1px solid rgba(103,232,249,.38);background:rgba(103,232,249,.08);color:#eafcff;font-weight:800;font-size:14px;margin-bottom:16px}
.docs-hero h1{margin:0;font-size:clamp(42px,5vw,72px);line-height:1.02;letter-spacing:-1.6px}
.docs-hero p{margin:14px 0 0;max-width:720px;color:#a9b8d4;font-size:18px;line-height:1.65}
.docs-hero-panel{border:1px solid rgba(83,118,183,.24);border-radius:24px;padding:18px;background:rgba(7,12,28,.48);display:grid;gap:12px}
.docs-stat{border:1px solid rgba(83,118,183,.18);border-radius:18px;padding:16px;background:rgba(18,28,56,.55)}
.docs-stat strong{display:block;font-size:28px;color:#fff;line-height:1.1}
.docs-stat span{display:block;margin-top:6px;color:#a9b8d4;font-size:14px}
.docs-tabs-wrap{width:min(1180px,calc(100% - 48px));margin:24px auto 0}
.docs-tabs{width:100%!important;margin:0!important;padding:0 0 8px!important;display:flex!important;gap:10px!important;flex-wrap:wrap!important}
.docs-content{width:min(1180px,calc(100% - 48px));margin:10px auto 0}
.docs-section-head{margin:22px 0 16px}
.docs-section-head h2{margin:0;font-size:26px;letter-spacing:-.5px}
.docs-section-head p{margin:7px 0 0;color:#a9b8d4}
.docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.docs-card{min-height:220px!important}
.docs-hero::after,.docs-hero-wrap::after,.docs-content::after{display:none!important;content:none!important}
.docs-content .card h2{font-size:21px!important;line-height:1.28!important}
@media(max-width:1050px){.docs-hero{grid-template-columns:1fr}.docs-hero-panel{grid-template-columns:repeat(2,1fr)}.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.docs-hero-wrap,.docs-tabs-wrap,.docs-content{width:min(100% - 24px,720px)}.docs-hero{padding:24px 20px;border-radius:22px}.docs-hero h1{font-size:40px}.docs-hero-panel{grid-template-columns:1fr}.docs-tabs{flex-wrap:nowrap!important;overflow-x:auto}.docs-tabs .tab{white-space:nowrap}.docs-grid{grid-template-columns:1fr;gap:16px}}


/* =========================================================
   V10 PRO BRAND SYSTEM
   Sleek, futuristic, clean, brand-first professional design.
   This intentionally overrides earlier experimental layouts.
   ========================================================= */

:root{
  --v10-bg:#05070f;
  --v10-bg2:#080d1a;
  --v10-surface:#0b1224;
  --v10-surface2:#0f1a33;
  --v10-card:rgba(14,24,48,.78);
  --v10-card2:rgba(9,15,31,.88);
  --v10-border:rgba(120,160,255,.18);
  --v10-border2:rgba(103,232,249,.32);
  --v10-text:#f2f7ff;
  --v10-muted:#a6b5cf;
  --v10-soft:#dbeafe;
  --v10-cyan:#67e8f9;
  --v10-blue:#60a5fa;
  --v10-violet:#a78bfa;
  --v10-green:#34d399;
  --v10-glow:0 30px 100px rgba(0,0,0,.42);
  --v10-radius:24px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0!important;
  color:var(--v10-text)!important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif!important;
  background:
    radial-gradient(900px 480px at 8% -10%, rgba(103,232,249,.14), transparent 62%),
    radial-gradient(900px 480px at 92% -8%, rgba(167,139,250,.14), transparent 62%),
    radial-gradient(900px 520px at 50% 108%, rgba(96,165,250,.08), transparent 60%),
    linear-gradient(180deg,#05070f 0%,#081020 46%,#05070f 100%)!important;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 72%);
  z-index:-1;
}

a{color:var(--v10-cyan);text-decoration:none}
a:hover{text-decoration:none;color:#fff}

.container{width:min(1180px,calc(100% - 48px))!important;margin:auto!important}

/* Top progress */
.top-progress{height:3px!important;background:linear-gradient(90deg,var(--v10-cyan),var(--v10-violet),var(--v10-green))!important}

/* Header */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:rgba(5,7,15,.78)!important;
  border-bottom:1px solid rgba(120,160,255,.14)!important;
  backdrop-filter:blur(20px)!important;
}

.site-header .container.nav{
  width:min(1240px,calc(100% - 48px))!important;
}

.nav{
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  gap:26px!important;
}

.brand-logo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:8px 10px 8px 4px!important;
  border-radius:999px!important;
  color:#fff!important;
}

.brand-logo img{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 0 1px rgba(103,232,249,.22),0 12px 30px rgba(0,0,0,.35)!important;
}

.brand-logo span{
  font-size:24px!important;
  font-weight:950!important;
  letter-spacing:-.5px!important;
}

.navlinks{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  flex:1!important;
}

.navlinks a{
  color:var(--v10-muted)!important;
  font-size:15px!important;
  font-weight:800!important;
  padding:10px 12px!important;
  border-radius:999px!important;
  transition:.18s ease!important;
}

.navlinks a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.05)!important;
}

.search-form{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:360px!important;
  justify-content:flex-end!important;
}

.search-form input{
  width:280px!important;
  height:44px!important;
  border:1px solid rgba(120,160,255,.22)!important;
  border-radius:999px!important;
  background:rgba(6,10,22,.72)!important;
  color:#fff!important;
  padding:0 16px!important;
  outline:none!important;
}

.search-form input:focus{
  border-color:rgba(103,232,249,.55)!important;
  box-shadow:0 0 0 4px rgba(103,232,249,.08)!important;
}

.btn,.search-form button{
  height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:0 18px!important;
  border:1px solid rgba(103,232,249,.36)!important;
  color:#fff!important;
  font-weight:900!important;
  background:linear-gradient(135deg,rgba(103,232,249,.22),rgba(167,139,250,.16))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22)!important;
  transition:.2s ease!important;
}

.btn:hover,.search-form button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(103,232,249,.66)!important;
}

/* HOMEPAGE */
.company-hero{
  padding:48px 0 22px!important;
}

.company-hero-box{
  width:min(1240px,calc(100% - 48px))!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) 390px!important;
  gap:22px!important;
  align-items:stretch!important;
}

.company-hero-main{
  min-height:520px!important;
  border:1px solid var(--v10-border)!important;
  border-radius:34px!important;
  padding:54px!important;
  background:
    radial-gradient(680px 330px at 10% 6%,rgba(103,232,249,.19),transparent 62%),
    radial-gradient(680px 330px at 86% 24%,rgba(167,139,250,.17),transparent 62%),
    linear-gradient(135deg,rgba(15,26,52,.92),rgba(5,8,18,.97))!important;
  box-shadow:var(--v10-glow)!important;
  position:relative!important;
  overflow:hidden!important;
}

.company-hero-main:before{
  content:"";
  position:absolute;
  inset:auto 42px 42px auto;
  width:280px;
  height:180px;
  border-radius:30px;
  border:1px solid rgba(103,232,249,.13);
  background:
    linear-gradient(135deg,rgba(103,232,249,.08),transparent),
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 18px);
  opacity:.65;
}

.company-hero-main h1{
  max-width:860px!important;
  margin:0!important;
  font-size:clamp(54px,7vw,96px)!important;
  line-height:.95!important;
  letter-spacing:-3px!important;
}

.company-hero-main p{
  color:var(--v10-muted)!important;
  max-width:780px!important;
  margin:24px 0 0!important;
  font-size:19px!important;
  line-height:1.75!important;
}

.company-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:fit-content!important;
  margin:0 0 22px!important;
  padding:9px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(103,232,249,.35)!important;
  background:rgba(103,232,249,.08)!important;
  color:#e8fbff!important;
  font-size:14px!important;
  font-weight:900!important;
}

.company-cta-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin-top:30px!important;
}

.company-cta-secondary{
  background:rgba(7,12,28,.58)!important;
  border-color:rgba(120,160,255,.22)!important;
}

.company-hero-side{
  display:grid!important;
  gap:16px!important;
}

.company-metric-card{
  border:1px solid var(--v10-border)!important;
  border-radius:28px!important;
  padding:26px!important;
  background:linear-gradient(180deg,rgba(15,26,52,.82),rgba(7,12,28,.94))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.26)!important;
}

.company-metric-card strong{
  display:block!important;
  color:#fff!important;
  font-size:32px!important;
  line-height:1.1!important;
  letter-spacing:-.8px!important;
}

.company-metric-card span{
  display:block!important;
  margin-top:8px!important;
  color:var(--v10-muted)!important;
  line-height:1.55!important;
}

/* Trust strip */
.trust-strip{
  width:min(1240px,calc(100% - 48px))!important;
  margin:18px auto 0!important;
  padding:14px!important;
  border:1px solid rgba(120,160,255,.16)!important;
  border-radius:22px!important;
  background:rgba(11,18,36,.55)!important;
  display:flex!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

.trust-strip span{
  color:var(--v10-muted)!important;
  font-weight:800!important;
  font-size:13px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
}

/* Sections */
.company-section{
  width:min(1240px,calc(100% - 48px))!important;
  margin:42px auto 0!important;
}

.company-section-head{
  margin-bottom:18px!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:18px!important;
  align-items:flex-end!important;
}

.company-section-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:30px!important;
  letter-spacing:-.6px!important;
}

.company-section-head p{
  margin:8px 0 0!important;
  max-width:720px!important;
  color:var(--v10-muted)!important;
  line-height:1.65!important;
}

.company-grid-3{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}

.company-feature-card,.company-panel,.hub-card,.card{
  border:1px solid var(--v10-border)!important;
  background:
    radial-gradient(360px 160px at 10% 0%,rgba(103,232,249,.065),transparent),
    linear-gradient(180deg,rgba(15,26,52,.82),rgba(7,12,28,.92))!important;
  box-shadow:0 20px 70px rgba(0,0,0,.22)!important;
}

.company-feature-card{
  min-height:250px!important;
  border-radius:28px!important;
  padding:26px!important;
  transition:.22s ease!important;
}

.company-feature-card:hover,.card:hover,.hub-card:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(103,232,249,.34)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.32)!important;
}

.company-feature-card h3{
  margin:0 0 10px!important;
  color:#fff!important;
  font-size:22px!important;
}

.company-feature-card p,.company-panel p,.card p,.hub-card p{
  color:var(--v10-muted)!important;
  line-height:1.68!important;
}

.company-two-col{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px!important;
}

.company-panel{
  border-radius:30px!important;
  padding:30px!important;
}

.company-panel h2{
  margin:0 0 12px!important;
  font-size:28px!important;
  color:#fff!important;
}

.company-list{
  list-style:none!important;
  margin:18px 0 0!important;
  padding:0!important;
}

.company-list li{
  padding:11px 0!important;
  border-bottom:1px solid rgba(120,160,255,.12)!important;
  color:#dbeafe!important;
}

.company-list li:before{
  content:"✓";
  color:var(--v10-green);
  margin-right:10px;
  font-weight:900;
}

/* Docs/category pages */
.docs-hero-wrap{
  width:min(1180px,calc(100% - 48px))!important;
  margin:34px auto 0!important;
}

.docs-hero{
  border:1px solid var(--v10-border)!important;
  border-radius:30px!important;
  padding:36px!important;
  background:
    radial-gradient(520px 220px at 10% 0%,rgba(103,232,249,.14),transparent),
    radial-gradient(520px 220px at 92% 10%,rgba(167,139,250,.12),transparent),
    linear-gradient(135deg,rgba(15,26,52,.86),rgba(5,8,18,.94))!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 270px!important;
  gap:28px!important;
  align-items:center!important;
  box-shadow:0 24px 80px rgba(0,0,0,.28)!important;
}

.docs-hero h1{
  margin:0!important;
  font-size:clamp(42px,5vw,70px)!important;
  line-height:1!important;
  letter-spacing:-1.8px!important;
}

.docs-hero p{
  margin:14px 0 0!important;
  max-width:720px!important;
  color:var(--v10-muted)!important;
  font-size:18px!important;
  line-height:1.6!important;
}

.docs-kicker{
  display:inline-flex!important;
  width:fit-content!important;
  margin-bottom:16px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(103,232,249,.35)!important;
  background:rgba(103,232,249,.08)!important;
  color:#e8fbff!important;
  font-weight:900!important;
  font-size:14px!important;
}

.docs-hero-panel{
  border:1px solid rgba(120,160,255,.16)!important;
  border-radius:24px!important;
  padding:16px!important;
  background:rgba(7,12,28,.48)!important;
  display:grid!important;
  gap:12px!important;
}

.docs-stat{
  border:1px solid rgba(120,160,255,.14)!important;
  border-radius:18px!important;
  padding:16px!important;
  background:rgba(15,26,52,.58)!important;
}

.docs-stat strong{display:block!important;color:#fff!important;font-size:28px!important}
.docs-stat span{display:block!important;margin-top:6px!important;color:var(--v10-muted)!important;font-size:14px!important}

.docs-tabs-wrap,.docs-content{
  width:min(1180px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.docs-tabs-wrap{margin-top:24px!important}
.docs-content{margin-top:14px!important}

.docs-tabs{
  width:100%!important;
  margin:0!important;
  padding:0 0 8px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}

.tab{
  border:1px solid rgba(120,160,255,.20)!important;
  background:rgba(7,12,28,.55)!important;
  color:var(--v10-muted)!important;
  padding:9px 14px!important;
  border-radius:999px!important;
  font-weight:800!important;
}

.tab.active,.tab:hover{
  border-color:rgba(103,232,249,.45)!important;
  background:rgba(103,232,249,.10)!important;
  color:#fff!important;
}

.docs-section-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:28px!important;
  letter-spacing:-.5px!important;
}

.docs-section-head p{margin:8px 0 0!important;color:var(--v10-muted)!important}

.docs-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
}

/* Blog article */
.layout{
  width:min(1040px,calc(100% - 48px))!important;
  margin:34px auto 0!important;
  display:flex!important;
  flex-direction:column!important;
}

.article{
  width:100%!important;
  max-width:1040px!important;
  margin:0 auto!important;
  padding:42px 50px!important;
  border-radius:30px!important;
  border:1px solid var(--v10-border)!important;
  background:linear-gradient(180deg,rgba(15,26,52,.82),rgba(7,12,28,.94))!important;
  box-shadow:var(--v10-glow)!important;
}

.article h1{
  font-size:clamp(38px,4.5vw,60px)!important;
  line-height:1.06!important;
  letter-spacing:-1.4px!important;
  margin:14px 0 18px!important;
}

.prose{
  max-width:100%!important;
  font-size:18px!important;
  line-height:1.85!important;
}

.prose p,.prose li{
  max-width:900px!important;
  color:#dbeafe!important;
  line-height:1.85!important;
}

.prose h2{
  margin-top:38px!important;
  color:#fff!important;
  font-size:30px!important;
}

.prose h3{color:#fff!important;font-size:23px!important}

.toc{
  order:-1!important;
  position:relative!important;
  top:auto!important;
  width:100%!important;
  max-width:1040px!important;
  margin:0 auto 18px!important;
  padding:14px 16px!important;
  border-radius:22px!important;
  border:1px solid var(--v10-border)!important;
  background:rgba(9,15,31,.74)!important;
}

.toc-title{font-size:15px!important;color:#fff!important;margin:0 0 9px!important}
.toc a{display:inline-flex!important;white-space:normal!important;margin:4px 6px 4px 0!important;padding:8px 12px!important;border:1px solid rgba(120,160,255,.16)!important;border-radius:999px!important;color:var(--v10-muted)!important;background:rgba(255,255,255,.025)!important}
.toc a:hover,.toc a.active{color:#fff!important;background:rgba(103,232,249,.10)!important;border-color:rgba(103,232,249,.35)!important}

.article-cover{
  max-width:780px!important;
  max-height:520px!important;
  object-fit:contain!important;
  background:#fff!important;
  padding:16px!important;
  border-radius:24px!important;
  display:block!important;
  margin:24px auto 30px!important;
}

pre{
  border-radius:18px!important;
  border:1px solid rgba(120,160,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;
}

.copy-btn{
  background:#071024!important;
  color:#fff!important;
  border:1px solid rgba(103,232,249,.25)!important;
}

/* Ads more refined */
.ad-slot{
  min-height:58px!important;
  border:1px dashed rgba(103,232,249,.24)!important;
  background:rgba(7,12,28,.34)!important;
  color:rgba(166,181,207,.82)!important;
}

/* Footer */
.footer{
  margin-top:70px!important;
  border-top:1px solid rgba(120,160,255,.14)!important;
  background:rgba(5,7,15,.72)!important;
}

.footer .container{
  display:flex!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  color:var(--v10-muted)!important;
}

/* Responsive */
@media(max-width:1080px){
  .company-hero-box,.company-two-col{grid-template-columns:1fr!important}
  .company-hero-main{min-height:auto!important}
  .company-grid-3,.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .docs-hero{grid-template-columns:1fr!important}
  .docs-hero-panel{grid-template-columns:repeat(2,1fr)!important}
  .search-form{min-width:260px!important}
  .search-form input{width:220px!important}
}

@media(max-width:760px){
  .container,.site-header .container.nav,.company-hero-box,.trust-strip,.company-section,.docs-hero-wrap,.docs-tabs-wrap,.docs-content,.layout{
    width:min(100% - 24px,720px)!important;
  }
  .nav{flex-direction:column!important;align-items:stretch!important;padding:14px 0!important;gap:12px!important}
  .navlinks{justify-content:flex-start!important;overflow:auto!important;padding-bottom:4px!important}
  .search-form{width:100%!important}
  .search-form input{width:100%!important}
  .company-hero{padding:22px 0 12px!important}
  .company-hero-main{padding:30px 22px!important;border-radius:26px!important}
  .company-hero-main h1{font-size:42px!important;letter-spacing:-1.4px!important}
  .company-grid-3,.docs-grid{grid-template-columns:1fr!important}
  .company-section-head{display:block!important}
  .docs-hero{padding:24px 20px!important;border-radius:24px!important}
  .docs-hero h1{font-size:40px!important}
  .docs-hero-panel{grid-template-columns:1fr!important}
  .docs-tabs{flex-wrap:nowrap!important;overflow-x:auto!important}
  .tab{white-space:nowrap!important}
  .article{padding:24px 18px!important;border-radius:24px!important}
  .article h1{font-size:36px!important}
  .toc{padding:12px!important}
}



/* =========================================================
   V11 PUBLIC-READY PROFESSIONAL UI
   Removes internal-looking elements and cleans typography.
   ========================================================= */

:root {
  --brand-bg: #060914;
  --brand-bg-2: #090f1e;
  --brand-card: rgba(13, 22, 44, .82);
  --brand-card-solid: #0d162c;
  --brand-border: rgba(117, 150, 210, .22);
  --brand-border-strong: rgba(93, 211, 255, .38);
  --brand-text: #eef4ff;
  --brand-muted: #a8b6cf;
  --brand-subtle: #d8e5ff;
  --brand-cyan: #5dd3ff;
  --brand-blue: #60a5fa;
  --brand-violet: #9b8cff;
  --brand-green: #34d399;
  --brand-radius: 24px;
  --brand-shadow: 0 24px 70px rgba(0,0,0,.32);
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--brand-text) !important;
  background:
    radial-gradient(900px 420px at 8% -6%, rgba(93,211,255,.13), transparent 60%),
    radial-gradient(900px 420px at 92% -6%, rgba(155,140,255,.12), transparent 60%),
    linear-gradient(180deg, #060914 0%, #081020 48%, #060914 100%) !important;
}

body:before {
  opacity: .38 !important;
}

/* Header: less flashy, more company-like */
.site-header {
  background: rgba(6, 9, 20, .86) !important;
  border-bottom: 1px solid rgba(117,150,210,.16) !important;
}

.site-header .container.nav {
  width: min(1220px, calc(100% - 48px)) !important;
}

.nav {
  min-height: 74px !important;
  gap: 22px !important;
}

.brand-logo img {
  width: 42px !important;
  height: 42px !important;
}

.brand-logo span {
  font-size: 23px !important;
  letter-spacing: -.45px !important;
}

.navlinks {
  gap: 2px !important;
}

.navlinks a {
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: var(--brand-muted) !important;
  padding: 9px 11px !important;
}

.navlinks a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.045) !important;
}

.search-form input {
  height: 42px !important;
  width: 270px !important;
  background: rgba(7,12,26,.74) !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  color: #fff !important;
}

.btn,
.search-form button {
  height: 42px !important;
  border-radius: 999px !important;
  padding: 0 17px !important;
  background: linear-gradient(135deg, rgba(93,211,255,.19), rgba(155,140,255,.14)) !important;
  border: 1px solid rgba(93,211,255,.35) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: rgba(10,17,34,.72) !important;
  border-color: rgba(117,150,210,.24) !important;
}

/* Generic public page hero */
.home-hero,
.page-hero {
  width: min(1220px, calc(100% - 48px));
  margin: 38px auto 0;
}

.home-hero-inner,
.page-hero {
  border: 1px solid var(--brand-border);
  border-radius: 34px;
  background:
    radial-gradient(620px 300px at 12% 4%, rgba(93,211,255,.16), transparent 60%),
    radial-gradient(620px 300px at 88% 10%, rgba(155,140,255,.13), transparent 60%),
    linear-gradient(135deg, rgba(14, 24, 48, .90), rgba(6, 10, 24, .96));
  box-shadow: var(--brand-shadow);
}

.home-hero-inner {
  min-height: 500px;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
}

.home-copy h1,
.page-hero h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -2.2px;
  max-width: 840px;
}

.home-copy p,
.page-hero p {
  margin: 20px 0 0;
  color: var(--brand-muted);
  font-size: 18px;
  line-height: 1.72;
  max-width: 760px;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(93,211,255,.34);
  background: rgba(93,211,255,.075);
  color: #e8fbff;
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: .1px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.home-panel {
  border: 1px solid rgba(117,150,210,.18);
  border-radius: 28px;
  padding: 18px;
  background: rgba(6,10,22,.42);
}

.panel-grid {
  display: grid;
  gap: 12px;
}

.panel-grid a {
  display: block;
  padding: 18px;
  border-radius: 18px;
  background: rgba(13,22,44,.70);
  border: 1px solid rgba(117,150,210,.14);
}

.panel-grid a:hover {
  border-color: var(--brand-border-strong);
  transform: translateY(-2px);
}

.panel-grid strong {
  display: block;
  color: #fff;
  font-size: 19px;
  margin-bottom: 6px;
}

.panel-grid span {
  color: var(--brand-muted);
  line-height: 1.55;
}

.brand-strip {
  width: min(1220px, calc(100% - 48px));
  margin: 18px auto 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 14px;
  border: 1px solid rgba(117,150,210,.15);
  border-radius: 22px;
  background: rgba(13,22,44,.45);
}

.brand-strip span {
  color: var(--brand-muted);
  font-weight: 750;
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}

/* Page hero */
.page-hero {
  padding: 48px;
  min-height: 340px;
  display: flex;
  align-items: center;
}

.page-hero-copy {
  max-width: 900px;
}

/* Sections */
.content-section {
  width: min(1220px, calc(100% - 48px));
  margin: 42px auto 0;
}

.section-heading {
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -.6px;
  color: #fff;
}

.section-heading p {
  margin: 8px 0 0;
  color: var(--brand-muted);
  line-height: 1.65;
  max-width: 720px;
}

.feature-grid,
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-card,
.post-card,
.info-panel,
.book-panel,
.docs-card,
.card {
  border: 1px solid var(--brand-border) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(360px 160px at 10% 0%, rgba(93,211,255,.055), transparent),
    linear-gradient(180deg, rgba(13,22,44,.84), rgba(7,12,26,.94)) !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.22) !important;
}

.feature-card,
.post-card,
.info-panel {
  padding: 24px;
}

.feature-card:hover,
.post-card:hover,
.card:hover {
  border-color: var(--brand-border-strong) !important;
  transform: translateY(-3px) !important;
}

.feature-card span {
  display: inline-flex;
  color: var(--brand-cyan);
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 14px;
}

.feature-card h3,
.post-card h2,
.card h2 {
  color: #fff !important;
  margin: 0 0 10px !important;
  font-size: 21px !important;
  line-height: 1.26 !important;
}

.feature-card p,
.post-card p,
.info-panel p,
.card p {
  color: var(--brand-muted) !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

.meta {
  color: var(--brand-muted) !important;
  gap: 9px !important;
  margin-bottom: 12px !important;
}

.meta span:first-child {
  color: #dbeafe;
}

.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.info-panel h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 27px;
}

.clean-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.clean-list li {
  padding: 11px 0;
  color: #dbeafe;
  border-bottom: 1px solid rgba(117,150,210,.13);
}

.clean-list li:before {
  content: "✓";
  color: var(--brand-green);
  font-weight: 900;
  margin-right: 10px;
}

/* Clean tabs */
.clean-tabs,
.docs-tabs {
  display: flex !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}

.tab {
  background: rgba(7,12,26,.56) !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  color: var(--brand-muted) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-weight: 750 !important;
}

.tab.active,
.tab:hover {
  color: #fff !important;
  border-color: rgba(93,211,255,.42) !important;
  background: rgba(93,211,255,.09) !important;
}

/* Docs pages */
.docs-hero-wrap {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 36px auto 0 !important;
}

.docs-hero {
  border: 1px solid var(--brand-border) !important;
  border-radius: 30px !important;
  padding: 36px !important;
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(93,211,255,.13), transparent),
    linear-gradient(135deg, rgba(13,22,44,.86), rgba(6,10,24,.94)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 270px !important;
  gap: 26px !important;
  align-items: center !important;
}

.docs-hero h1 {
  margin: 0 !important;
  font-size: clamp(40px, 5vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -1.7px !important;
}

.docs-hero p {
  color: var(--brand-muted) !important;
  max-width: 720px !important;
}

.docs-kicker {
  display: inline-flex !important;
  margin-bottom: 15px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(93,211,255,.33) !important;
  background: rgba(93,211,255,.07) !important;
  color: #e8fbff !important;
  font-weight: 850 !important;
}

.docs-hero-panel {
  border: 1px solid rgba(117,150,210,.17) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  background: rgba(7,12,26,.45) !important;
}

.docs-stat {
  border: 1px solid rgba(117,150,210,.14) !important;
  border-radius: 17px !important;
  padding: 15px !important;
  background: rgba(13,22,44,.60) !important;
}

.docs-tabs-wrap,
.docs-content {
  width: min(1180px, calc(100% - 48px)) !important;
}

.docs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Article */
.layout {
  width: min(1040px, calc(100% - 48px)) !important;
}

.article {
  padding: 42px 50px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(13,22,44,.84), rgba(7,12,26,.94)) !important;
  border: 1px solid var(--brand-border) !important;
}

.article h1 {
  font-size: clamp(38px, 4.6vw, 58px) !important;
  letter-spacing: -1.4px !important;
}

.prose {
  font-size: 18px !important;
}

.prose p,
.prose li {
  color: #dbeafe !important;
  line-height: 1.85 !important;
}

.toc {
  background: rgba(7,12,26,.68) !important;
  border: 1px solid var(--brand-border) !important;
}

.ad-slot-empty {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: none !important;
}

/* Book page */
.book-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: center;
  padding: 30px;
}

.book-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 34px;
  letter-spacing: -.7px;
}

.book-copy p {
  color: var(--brand-muted);
  line-height: 1.7;
}

.book-art {
  background: #fff;
  border-radius: 24px;
  padding: 14px;
  text-align: center;
}

.book-art img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

/* Footer */
.footer {
  margin-top: 70px !important;
  border-top: 1px solid rgba(117,150,210,.15) !important;
  background: rgba(6,9,20,.74) !important;
}

.footer .container {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  color: var(--brand-muted) !important;
}

/* Responsive */
@media(max-width: 1050px) {
  .home-hero-inner,
  .split-panel,
  .book-panel {
    grid-template-columns: 1fr !important;
  }
  .home-panel {
    max-width: 680px;
  }
  .feature-grid,
  .post-grid,
  .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .docs-hero {
    grid-template-columns: 1fr !important;
  }
  .docs-hero-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media(max-width: 760px) {
  .container,
  .home-hero,
  .page-hero,
  .content-section,
  .brand-strip,
  .docs-hero-wrap,
  .docs-tabs-wrap,
  .docs-content,
  .layout {
    width: min(100% - 24px, 720px) !important;
  }
  .nav {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 0 !important;
  }
  .navlinks {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  .search-form {
    width: 100% !important;
    min-width: 0 !important;
  }
  .search-form input {
    width: 100% !important;
  }
  .home-hero-inner,
  .page-hero {
    padding: 26px 20px;
    border-radius: 24px;
  }
  .home-copy h1,
  .page-hero h1 {
    font-size: 40px;
  }
  .feature-grid,
  .post-grid,
  .docs-grid {
    grid-template-columns: 1fr !important;
  }
  .docs-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .tab {
    white-space: nowrap !important;
  }
  .article {
    padding: 24px 18px !important;
  }
  .article h1 {
    font-size: 34px !important;
  }
}



/* =========================================================
   V12 TYPOGRAPHY + HEADER POLISH
   Makes the site feel more professional, less oversized.
   ========================================================= */

/* Header should be compact like a serious company website */
.site-header .container.nav {
  width: min(1180px, calc(100% - 48px)) !important;
}

.nav {
  min-height: 62px !important;
  gap: 18px !important;
}

.brand-logo {
  gap: 9px !important;
  padding: 5px 8px 5px 2px !important;
}

.brand-logo img {
  width: 34px !important;
  height: 34px !important;
}

.brand-logo span {
  font-size: 19px !important;
  letter-spacing: -0.25px !important;
  font-weight: 900 !important;
}

.navlinks {
  gap: 0 !important;
}

.navlinks a {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 7px 9px !important;
}

.search-form {
  min-width: 300px !important;
}

.search-form input {
  height: 38px !important;
  width: 235px !important;
  font-size: 13.5px !important;
  padding: 0 13px !important;
}

.search-form button,
.btn {
  height: 38px !important;
  padding: 0 15px !important;
  font-size: 13.5px !important;
}

/* Homepage hero: refined, not oversized */
.home-hero {
  margin-top: 30px !important;
}

.home-hero-inner {
  min-height: 420px !important;
  padding: 40px 44px !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 30px !important;
  border-radius: 30px !important;
}

.eyebrow {
  font-size: 12.8px !important;
  padding: 7px 11px !important;
  margin-bottom: 15px !important;
}

.home-copy h1,
.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.35px !important;
  max-width: 760px !important;
}

.home-copy p,
.page-hero p {
  font-size: 16.5px !important;
  line-height: 1.68 !important;
  max-width: 700px !important;
  margin-top: 16px !important;
}

.hero-actions {
  margin-top: 22px !important;
}

.home-panel {
  border-radius: 24px !important;
  padding: 15px !important;
}

.panel-grid a {
  padding: 15px !important;
  border-radius: 16px !important;
}

.panel-grid strong {
  font-size: 17px !important;
}

.panel-grid span {
  font-size: 14px !important;
}

/* Public page hero: About, Services, Books, Downloads */
.page-hero {
  margin-top: 30px !important;
  min-height: 270px !important;
  padding: 38px 42px !important;
  border-radius: 30px !important;
}

/* Section scale */
.content-section {
  margin-top: 34px !important;
}

.section-heading {
  margin-bottom: 15px !important;
}

.section-heading h2,
.docs-section-head h2 {
  font-size: 24px !important;
  letter-spacing: -0.4px !important;
}

.section-heading p,
.docs-section-head p {
  font-size: 15px !important;
}

/* Cards: less bulky, more elegant */
.feature-grid,
.post-grid,
.docs-grid {
  gap: 16px !important;
}

.feature-card,
.post-card,
.info-panel,
.card,
.docs-card {
  padding: 20px !important;
  border-radius: 20px !important;
}

.feature-card h3,
.post-card h2,
.card h2 {
  font-size: 18.5px !important;
  line-height: 1.3 !important;
}

.feature-card p,
.post-card p,
.info-panel p,
.card p {
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

.meta {
  font-size: 12.8px !important;
}

/* Docs/category pages */
.docs-hero-wrap {
  margin-top: 30px !important;
}

.docs-hero {
  padding: 30px 32px !important;
  border-radius: 26px !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
}

.docs-hero h1 {
  font-size: clamp(34px, 4.4vw, 54px) !important;
  letter-spacing: -1.2px !important;
}

.docs-hero p {
  font-size: 15.8px !important;
  line-height: 1.62 !important;
}

.docs-kicker {
  font-size: 12.8px !important;
  padding: 7px 11px !important;
  margin-bottom: 13px !important;
}

.docs-stat {
  padding: 13px !important;
}

.docs-stat strong {
  font-size: 22px !important;
}

.docs-stat span {
  font-size: 13px !important;
}

/* Blog article: more magazine/professional */
.layout {
  margin-top: 28px !important;
  width: min(980px, calc(100% - 48px)) !important;
}

.article {
  padding: 36px 44px !important;
  border-radius: 26px !important;
}

.article h1 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}

.prose {
  font-size: 16.5px !important;
  line-height: 1.8 !important;
}

.prose p,
.prose li {
  font-size: 16.5px !important;
  line-height: 1.8 !important;
}

.prose h2 {
  font-size: 25px !important;
  margin-top: 32px !important;
}

.prose h3 {
  font-size: 20px !important;
}

.toc {
  max-width: 980px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
}

.toc-title {
  font-size: 13.5px !important;
}

.toc a {
  font-size: 12.8px !important;
  padding: 7px 10px !important;
}

/* Book page */
.book-panel {
  padding: 24px !important;
  border-radius: 24px !important;
  grid-template-columns: minmax(0,1fr) 260px !important;
}

.book-copy h2 {
  font-size: 28px !important;
}

.book-copy p {
  font-size: 15px !important;
}

.book-art img {
  max-height: 300px !important;
}

/* Footer smaller */
.footer {
  margin-top: 56px !important;
  font-size: 13.5px !important;
}

/* Mobile */
@media(max-width: 1050px) {
  .home-hero-inner,
  .docs-hero,
  .book-panel {
    grid-template-columns: 1fr !important;
  }

  .home-panel {
    max-width: none !important;
  }

  .search-form {
    min-width: 260px !important;
  }

  .search-form input {
    width: 210px !important;
  }
}

@media(max-width: 760px) {
  .nav {
    min-height: auto !important;
    gap: 10px !important;
  }

  .brand-logo img {
    width: 32px !important;
    height: 32px !important;
  }

  .brand-logo span {
    font-size: 18px !important;
  }

  .navlinks a {
    font-size: 13px !important;
    padding: 7px 8px !important;
  }

  .home-hero-inner,
  .page-hero {
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }

  .home-copy h1,
  .page-hero h1 {
    font-size: 34px !important;
    letter-spacing: -0.9px !important;
  }

  .home-copy p,
  .page-hero p {
    font-size: 15.5px !important;
  }

  .docs-hero {
    padding: 22px 18px !important;
  }

  .docs-hero h1 {
    font-size: 34px !important;
  }

  .article {
    padding: 24px 18px !important;
  }

  .article h1 {
    font-size: 31px !important;
  }
}



/* =========================================================
   V13 VIDEO EMBED POLISH
   YouTube videos should not dominate tutorial pages.
   ========================================================= */

.video-wrap {
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  padding-top: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 18px 0 26px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  background: #020617 !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.28) !important;
}

.video-wrap iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Add a subtle label feel using spacing only, no extra public text */
.article .video-wrap {
  clear: both !important;
}

/* If video appears before article content, keep it compact and aligned to prose */
.article > .video-wrap {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* On mobile, video should use full available width */
@media (max-width: 720px) {
  .video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    margin: 16px 0 22px !important;
  }
}



/* =========================================================
   V14 SERVICE PAGE + CENTERED VIDEO FINAL POLISH
   ========================================================= */

/* Center tutorial YouTube videos. They should support content, not dominate it. */
.video-wrap,
.article > .video-wrap {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  aspect-ratio: 16 / 9 !important;
  padding-top: 0 !important;
  margin: 20px auto 28px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  background: #020617 !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
  position: relative !important;
}

.video-wrap iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Service page should feel like a public business page */
.services-hero {
  background:
    radial-gradient(620px 300px at 12% 4%, rgba(93,211,255,.13), transparent 60%),
    radial-gradient(620px 300px at 88% 12%, rgba(52,211,153,.10), transparent 58%),
    linear-gradient(135deg, rgba(13,22,44,.90), rgba(6,10,24,.96)) !important;
}

.service-cta-panel {
  text-align: left;
  padding: 30px !important;
}

.service-cta-panel h2 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 28px !important;
  letter-spacing: -.55px !important;
}

.service-cta-panel p {
  max-width: 780px !important;
  margin-bottom: 0 !important;
}

/* Remove any remaining empty ad visual impact */
.ad-slot-empty,
.ad-slot[aria-hidden="true"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Make services feature cards slightly more formal */
.services-hero + .content-section .feature-card {
  min-height: 230px !important;
}

@media (max-width: 720px) {
  .video-wrap,
  .article > .video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 24px !important;
    border-radius: 16px !important;
  }

  .service-cta-panel {
    padding: 22px !important;
  }
}



/* =========================================================
   Redis Book Landing Page Revamp
   Applies when post is marked as Book / is_book = 1.
   ========================================================= */

.book-landing {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 34px auto 0 !important;
}

.book-landing-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 42px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  background:
    radial-gradient(620px 300px at 12% 4%, rgba(220,38,38,.13), transparent 60%),
    radial-gradient(620px 300px at 88% 12%, rgba(93,211,255,.12), transparent 58%),
    linear-gradient(135deg, rgba(13,22,44,.90), rgba(6,10,24,.96)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.32) !important;
}

.book-landing-copy h1 {
  margin: 0 !important;
  max-width: 820px !important;
  color: #fff !important;
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.8px !important;
}

.book-subtitle {
  max-width: 760px !important;
  margin: 18px 0 0 !important;
  color: #a8b6cf !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.book-landing-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}

.book-trust-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 22px !important;
}

.book-trust-row span {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: #dbeafe !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(117,150,210,.16) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.book-cover-card {
  padding: 16px !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.30) !important;
  text-align: center !important;
}

.book-cover-card img {
  width: 100% !important;
  max-height: 430px !important;
  object-fit: contain !important;
  display: block !important;
}

.book-value-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 22px !important;
}

.book-value-card {
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(117,150,210,.20) !important;
  background:
    radial-gradient(300px 130px at 0% 0%, rgba(93,211,255,.06), transparent),
    linear-gradient(180deg, rgba(13,22,44,.82), rgba(7,12,26,.92)) !important;
}

.book-value-card span {
  display: inline-flex !important;
  color: #5dd3ff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.book-value-card h2 {
  color: #fff !important;
  font-size: 20px !important;
  margin: 0 0 8px !important;
  letter-spacing: -.25px !important;
}

.book-value-card p {
  color: #a8b6cf !important;
  line-height: 1.62 !important;
  margin: 0 !important;
  font-size: 14.5px !important;
}

.book-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 310px !important;
  gap: 24px !important;
  margin-top: 24px !important;
  align-items: start !important;
}

.book-detail-main {
  padding: 32px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(117,150,210,.20) !important;
  background: linear-gradient(180deg, rgba(13,22,44,.84), rgba(7,12,26,.94)) !important;
}

.book-section-head {
  margin-bottom: 18px !important;
}

.book-section-head span {
  display: inline-flex !important;
  margin-bottom: 8px !important;
  color: #bff4ff !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(93,211,255,.24) !important;
  background: rgba(93,211,255,.07) !important;
}

.book-section-head h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 27px !important;
  letter-spacing: -.45px !important;
}

.book-prose {
  font-size: 16.5px !important;
}

.book-prose p,
.book-prose li {
  color: #dbeafe !important;
  line-height: 1.75 !important;
}

.book-learning-panel {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(117,150,210,.15) !important;
}

.book-learning-panel h2 {
  color: #fff !important;
  margin: 0 0 16px !important;
  font-size: 24px !important;
}

.book-audience-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.book-audience-grid div {
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117,150,210,.16) !important;
  background: rgba(7,12,26,.48) !important;
}

.book-audience-grid strong {
  display: block !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}

.book-audience-grid p {
  color: #a8b6cf !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  font-size: 14px !important;
}

.book-sidebar {
  display: grid !important;
  gap: 16px !important;
  position: sticky !important;
  top: 88px !important;
}

.book-sidebar-card {
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(117,150,210,.20) !important;
  background: linear-gradient(180deg, rgba(13,22,44,.86), rgba(7,12,26,.95)) !important;
}

.book-sidebar-card h3 {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: 19px !important;
}

.book-sidebar-card ul {
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

.book-sidebar-card li {
  color: #dbeafe !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(117,150,210,.12) !important;
  line-height: 1.45 !important;
  font-size: 14px !important;
}

.book-sidebar-card li:before {
  content: "✓";
  color: #34d399 !important;
  font-weight: 900 !important;
  margin-right: 9px !important;
}

.book-sidebar-card.subtle p {
  color: #a8b6cf !important;
  line-height: 1.6 !important;
}

.book-related {
  margin-top: 30px !important;
}

@media (max-width: 980px) {
  .book-landing-hero,
  .book-detail-layout {
    grid-template-columns: 1fr !important;
  }

  .book-cover-card {
    max-width: 330px !important;
    margin: 0 auto !important;
  }

  .book-sidebar {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  .book-landing {
    width: min(100% - 24px, 720px) !important;
    margin-top: 20px !important;
  }

  .book-landing-hero,
  .book-detail-main {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .book-landing-copy h1 {
    font-size: 34px !important;
  }

  .book-value-grid,
  .book-audience-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Related Guides Professional Cards */
.related-guides{margin-top:42px!important;padding-top:28px!important;border-top:1px solid rgba(117,150,210,.16)!important}
.related-guides-head{margin-bottom:16px!important}
.related-guides-head span{display:inline-flex!important;margin-bottom:8px!important;padding:6px 10px!important;border-radius:999px!important;border:1px solid rgba(93,211,255,.26)!important;background:rgba(93,211,255,.07)!important;color:#bff4ff!important;font-size:12px!important;font-weight:800!important;letter-spacing:.2px!important}
.related-guides-head h2{margin:0!important;color:#fff!important;font-size:24px!important;line-height:1.25!important;letter-spacing:-.35px!important}
.related-guides-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.related-guide-card{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:14px!important;align-items:flex-start!important;padding:16px!important;border-radius:18px!important;border:1px solid rgba(117,150,210,.18)!important;background:radial-gradient(260px 120px at 0% 0%,rgba(93,211,255,.06),transparent),linear-gradient(180deg,rgba(10,18,36,.72),rgba(6,11,24,.88))!important;box-shadow:0 12px 34px rgba(0,0,0,.18)!important;transition:.18s ease!important;min-height:132px!important}
.related-guide-card:hover{transform:translateY(-2px)!important;border-color:rgba(93,211,255,.34)!important;box-shadow:0 18px 46px rgba(0,0,0,.24)!important}
.related-guide-icon{width:42px!important;height:42px!important;border-radius:14px!important;display:grid!important;place-items:center!important;color:#e8fbff!important;background:rgba(93,211,255,.09)!important;border:1px solid rgba(93,211,255,.20)!important;font-size:16px!important;font-weight:900!important}
.related-guide-body h3{margin:0 0 7px!important;color:#fff!important;font-size:16.5px!important;line-height:1.34!important;letter-spacing:-.2px!important}
.related-guide-body p{margin:0!important;color:#a8b6cf!important;font-size:13.5px!important;line-height:1.55!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
@media(max-width:760px){.related-guides-list{grid-template-columns:1fr!important}.related-guide-card{min-height:auto!important}}



/* =========================================================
   Auto Light/Dark Theme System
   Light theme: 7 AM - 7 PM visitor local time.
   Dark theme: 7 PM - 7 AM.
   Manual toggle persists in localStorage.
   ========================================================= */

.theme-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117,150,210,.25) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: .18s ease !important;
}

.theme-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(93,211,255,.45) !important;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] body {
  color: #172033 !important;
  background:
    radial-gradient(900px 420px at 8% -6%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(900px 420px at 92% -6%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 46%, #ffffff 100%) !important;
}

html[data-theme="light"] body:before {
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) !important;
  opacity: .55 !important;
}

html[data-theme="light"] a { color: #0369a1 !important; }
html[data-theme="light"] a:hover { color: #0f172a !important; }

html[data-theme="light"] .site-header {
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
}

html[data-theme="light"] .brand-logo span,
html[data-theme="light"] .logo {
  color: #0f172a !important;
}

html[data-theme="light"] .brand-logo img {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10), 0 8px 22px rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .navlinks a { color: #475569 !important; }
html[data-theme="light"] .navlinks a:hover {
  color: #0f172a !important;
  background: rgba(15,23,42,.055) !important;
}

html[data-theme="light"] .search-form input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.14) !important;
}

html[data-theme="light"] .search-form input::placeholder { color: #64748b !important; }

html[data-theme="light"] .search-form button,
html[data-theme="light"] .btn {
  color: #0f172a !important;
  background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(99,102,241,.10)) !important;
  border-color: rgba(14,165,233,.28) !important;
}

html[data-theme="light"] .btn-secondary {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .theme-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .home-hero-inner,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .docs-hero,
html[data-theme="light"] .article,
html[data-theme="light"] .book-landing-hero,
html[data-theme="light"] .book-detail-main,
html[data-theme="light"] .skills-panel,
html[data-theme="light"] .info-panel,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .card,
html[data-theme="light"] .docs-card,
html[data-theme="light"] .book-value-card,
html[data-theme="light"] .book-sidebar-card,
html[data-theme="light"] .related-guide-card,
html[data-theme="light"] .panel-grid a,
html[data-theme="light"] .home-panel,
html[data-theme="light"] .toc {
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(14,165,233,.07), transparent),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.98)) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 54px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .home-copy h1,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .docs-hero h1,
html[data-theme="light"] .article h1,
html[data-theme="light"] .book-landing-copy h1,
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .docs-section-head h2,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .post-card h2,
html[data-theme="light"] .card h2,
html[data-theme="light"] .info-panel h2,
html[data-theme="light"] .book-copy h2,
html[data-theme="light"] .book-section-head h2,
html[data-theme="light"] .book-value-card h2,
html[data-theme="light"] .book-sidebar-card h3,
html[data-theme="light"] .related-guides-head h2,
html[data-theme="light"] .related-guide-body h3,
html[data-theme="light"] .prose h2,
html[data-theme="light"] .prose h3,
html[data-theme="light"] .book-audience-grid strong,
html[data-theme="light"] .docs-stat strong,
html[data-theme="light"] .skill-name,
html[data-theme="light"] .panel-grid strong {
  color: #0f172a !important;
}

html[data-theme="light"] .home-copy p,
html[data-theme="light"] .page-hero p,
html[data-theme="light"] .docs-hero p,
html[data-theme="light"] .section-heading p,
html[data-theme="light"] .docs-section-head p,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .post-card p,
html[data-theme="light"] .card p,
html[data-theme="light"] .info-panel p,
html[data-theme="light"] .book-subtitle,
html[data-theme="light"] .book-value-card p,
html[data-theme="light"] .book-sidebar-card p,
html[data-theme="light"] .related-guide-body p,
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose li,
html[data-theme="light"] .panel-grid span,
html[data-theme="light"] .book-copy p,
html[data-theme="light"] .book-audience-grid p {
  color: #475569 !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .docs-kicker,
html[data-theme="light"] .company-kicker,
html[data-theme="light"] .related-guides-head span,
html[data-theme="light"] .book-section-head span,
html[data-theme="light"] .skill-value {
  color: #075985 !important;
  background: rgba(14,165,233,.09) !important;
  border-color: rgba(14,165,233,.24) !important;
}

html[data-theme="light"] .brand-strip,
html[data-theme="light"] .trust-strip {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .brand-strip span,
html[data-theme="light"] .trust-strip span,
html[data-theme="light"] .book-trust-row span {
  color: #475569 !important;
  background: rgba(15,23,42,.045) !important;
  border-color: rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .tab {
  color: #475569 !important;
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .tab.active,
html[data-theme="light"] .tab:hover {
  color: #0f172a !important;
  background: rgba(14,165,233,.10) !important;
  border-color: rgba(14,165,233,.28) !important;
}

html[data-theme="light"] .meta,
html[data-theme="light"] .toc a {
  color: #64748b !important;
}

html[data-theme="light"] .badge {
  color: #075985 !important;
  background: rgba(14,165,233,.08) !important;
  border-color: rgba(14,165,233,.22) !important;
}

html[data-theme="light"] .clean-list li,
html[data-theme="light"] .book-sidebar-card li {
  color: #334155 !important;
  border-bottom-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .skill-row,
html[data-theme="light"] .book-audience-grid div,
html[data-theme="light"] .docs-stat {
  background: rgba(248,251,255,.85) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .skill-track {
  background: rgba(15,23,42,.12) !important;
}

html[data-theme="light"] pre,
html[data-theme="light"] .prose p code,
html[data-theme="light"] .prose li code {
  border-color: rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .footer {
  background: rgba(255,255,255,.78) !important;
  border-top-color: rgba(15,23,42,.10) !important;
  color: #64748b !important;
}

html[data-theme="light"] .book-cover-card,
html[data-theme="light"] .book-art,
html[data-theme="light"] .article-cover {
  background: #ffffff !important;
}

html:not([data-theme]) body {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 46%, #ffffff 100%) !important;
}



/* =========================================================
   Skills Section Theme Fix
   Restores and polishes Technical Expertise after theme update.
   ========================================================= */

.skills-panel {
  width: 100% !important;
  border: 1px solid rgba(117,150,210,.22) !important;
  border-radius: 24px !important;
  padding: 26px !important;
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(93,211,255,.08), transparent),
    linear-gradient(180deg, rgba(13,22,44,.84), rgba(7,12,26,.94)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.22) !important;
}

.skills-panel .section-heading {
  margin-bottom: 18px !important;
}

.skills-panel .section-heading h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  letter-spacing: -.35px !important;
}

.skills-panel .section-heading p {
  margin: 8px 0 0 !important;
  color: #a8b6cf !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.skills-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

.skill-row {
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117,150,210,.16) !important;
  background: rgba(7,12,26,.42) !important;
}

.skill-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.skill-name {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  letter-spacing: .25px !important;
  text-transform: uppercase !important;
}

.skill-value {
  flex: 0 0 auto !important;
  color: #bff4ff !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(93,211,255,.24) !important;
  background: rgba(93,211,255,.08) !important;
}

.skill-track {
  position: relative !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: rgba(117,150,210,.18) !important;
  overflow: hidden !important;
}

.skill-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #5dd3ff, #34d399) !important;
  box-shadow: 0 0 24px rgba(93,211,255,.22) !important;
}

/* Light theme skills */
html[data-theme="light"] .skills-panel {
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(14,165,233,.07), transparent),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.98)) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 54px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .skills-panel .section-heading h2,
html[data-theme="light"] .skill-name {
  color: #0f172a !important;
}

html[data-theme="light"] .skills-panel .section-heading p {
  color: #475569 !important;
}

html[data-theme="light"] .skill-row {
  background: rgba(248,251,255,.88) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .skill-value {
  color: #075985 !important;
  background: rgba(14,165,233,.09) !important;
  border-color: rgba(14,165,233,.24) !important;
}

html[data-theme="light"] .skill-track {
  background: rgba(15,23,42,.12) !important;
}

/* Mobile */
@media (max-width: 760px) {
  .skills-panel {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .skills-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .skill-row {
    padding: 15px !important;
  }

  .skill-name {
    font-size: 13px !important;
  }
}



/* =========================================================
   Light Theme Article Note / Code / Table Fix
   Fixes messy "Note:" blocks and old tutorial content in light mode.
   ========================================================= */

/* General article readability in light theme */
html[data-theme="light"] .prose {
  color: #334155 !important;
}

html[data-theme="light"] .prose strong,
html[data-theme="light"] .prose b {
  color: #0f172a !important;
}

/* Old posts often have Note: inside paragraph/bold.
   This makes note-like paragraphs look clean instead of broken. */
html[data-theme="light"] .prose p:has(strong:first-child),
html[data-theme="light"] .prose p:has(b:first-child) {
  background: #f8fbff !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-left: 4px solid #0ea5e9 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #334155 !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.05) !important;
}

/* If browser does not support :has, blockquotes still get fixed */
html[data-theme="light"] .prose blockquote {
  background: #f8fbff !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-left: 4px solid #0ea5e9 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #334155 !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.05) !important;
}

html[data-theme="light"] .prose blockquote p {
  color: #334155 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Inline code in light theme */
html[data-theme="light"] .prose p code,
html[data-theme="light"] .prose li code,
html[data-theme="light"] .prose td code {
  color: #075985 !important;
  background: #eaf6ff !important;
  border: 1px solid rgba(14,165,233,.18) !important;
  padding: 2px 6px !important;
  border-radius: 7px !important;
  font-weight: 650 !important;
}

/* Code blocks in light theme */
html[data-theme="light"] pre,
html[data-theme="light"] pre[class*="language-"] {
  background: #0b1220 !important;
  color: #e5edf8 !important;
  border: 1px solid rgba(15,23,42,.18) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.12) !important;
}

html[data-theme="light"] pre code,
html[data-theme="light"] pre[class*="language-"] code {
  color: #e5edf8 !important;
  background: transparent !important;
}

/* Copy button inside light theme code block */
html[data-theme="light"] .copy-btn {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Tables in light theme */
html[data-theme="light"] .prose table {
  background: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .prose th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .prose td {
  color: #334155 !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* Lists and old HTML content cleanup */
html[data-theme="light"] .prose ul,
html[data-theme="light"] .prose ol {
  color: #334155 !important;
}

html[data-theme="light"] .prose li {
  color: #334155 !important;
}

/* Old article images in light theme */
html[data-theme="light"] .prose img {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
}

/* Avoid making every bold-start paragraph a note on very small screens if too cramped */
@media (max-width: 760px) {
  html[data-theme="light"] .prose p:has(strong:first-child),
  html[data-theme="light"] .prose p:has(b:first-child),
  html[data-theme="light"] .prose blockquote {
    padding: 12px 13px !important;
    border-radius: 12px !important;
  }
}



/* =========================================================
   Light Theme Related Guides Arrow Fix
   Makes arrow icon clearly visible in related guide cards.
   ========================================================= */

html[data-theme="light"] .related-guide-icon {
  color: #075985 !important;
  background: #e0f2fe !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.70), 0 8px 18px rgba(14,165,233,.12) !important;
}

html[data-theme="light"] .related-guide-card:hover .related-guide-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  border-color: rgba(2,132,199,.45) !important;
}

html[data-theme="light"] .related-guide-card {
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(14,165,233,.06), transparent),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.98)) !important;
}

html[data-theme="light"] .related-guide-body h3 {
  color: #0f172a !important;
}

html[data-theme="light"] .related-guide-body p {
  color: #475569 !important;
}



/* =========================================================
   Light Theme Book Section / Featured Book Fix
   Fixes /books featured book layout and contrast in light theme.
   ========================================================= */

html[data-theme="light"] .book-panel {
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(14,165,233,.07), transparent),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.98)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 54px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .book-copy h2 {
  color: #0f172a !important;
}

html[data-theme="light"] .book-copy p {
  color: #475569 !important;
}

html[data-theme="light"] .book-art {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .book-art img {
  background: #ffffff !important;
}

/* Featured book page/landing also needs clean light theme */
html[data-theme="light"] .book-cover-card {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .book-landing-hero,
html[data-theme="light"] .book-detail-main,
html[data-theme="light"] .book-value-card,
html[data-theme="light"] .book-sidebar-card {
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(14,165,233,.07), transparent),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.98)) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 54px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .book-landing-copy h1,
html[data-theme="light"] .book-value-card h2,
html[data-theme="light"] .book-section-head h2,
html[data-theme="light"] .book-learning-panel h2,
html[data-theme="light"] .book-sidebar-card h3 {
  color: #0f172a !important;
}

html[data-theme="light"] .book-subtitle,
html[data-theme="light"] .book-value-card p,
html[data-theme="light"] .book-prose p,
html[data-theme="light"] .book-prose li,
html[data-theme="light"] .book-sidebar-card p {
  color: #475569 !important;
}

html[data-theme="light"] .book-trust-row span {
  color: #475569 !important;
  background: rgba(15,23,42,.045) !important;
  border-color: rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .book-sidebar-card li {
  color: #334155 !important;
  border-bottom-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .book-audience-grid div {
  background: rgba(248,251,255,.88) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .book-audience-grid strong {
  color: #0f172a !important;
}

html[data-theme="light"] .book-audience-grid p {
  color: #475569 !important;
}

/* Make featured book panel balanced */
.book-panel {
  align-items: center !important;
}

.book-copy {
  min-width: 0 !important;
}

.book-art {
  max-width: 300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.book-art img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .book-panel {
    grid-template-columns: 1fr !important;
  }

  .book-art {
    max-width: 260px !important;
    margin-top: 10px !important;
  }
}