/* EddyBits blog-b styles — rules shared by every page in this group. Source of truth: edit here, then run  node _build/build.js */

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

:root {
      --green: #6DB244;
      --blue: #0497DA;
      --yellow: #FFD006;
      --navy: #1B1158;
      --white: #f0f0fa;
      --body-bg: #0b0b14;
      --light: #13131f;
      --border: rgba(255,255,255,0.08);
    }

@media (prefers-reduced-motion: no-preference) {
      .js .reveal { opacity: 0; transform: translateY(24px); }
    }

html, body {
      width: 100%;
      height: 100%;
    }

body {
      background: var(--body-bg);
      color: #e0e0ed;
      font-family: 'Montserrat', sans-serif;
      line-height: 1.6;
    }

nav {
      background: rgba(11, 11, 20, 0.92);
      backdrop-filter: blur(18px);
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid var(--border);
      padding: 1rem 6%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.logo-mark {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      color: var(--white);
      font-weight: 700;
      font-size: 0.95rem;
    }

.logo-mark svg {
      width: 32px;
      height: 40px;
    }

.logo-wordmark {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

.logo-wordmark .brand {
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--white);
    }

.logo-wordmark .sub {
      font-weight: 500;
      font-size: 0.65rem;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.nav-links {
      list-style: none;
      display: flex;
      gap: 2rem;
      align-items: center;
    }

.nav-links a {
      color: #e0e0ed;
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      transition: color 0.3s ease;
    }

.nav-links a:hover {
      color: var(--green);
    }

.nav-links a.active {
      color: var(--green);
    }

.nav-cta {
      background: var(--green);
      color: var(--navy) !important;
      padding: 0.6rem 1.2rem;
      border-radius: 6px;
      font-weight: 600;
    }

.nav-cta:hover {
      opacity: 0.9;
    }

.article-hero {
      background: linear-gradient(160deg, #0d0d1e 0%, #111827 100%);
      padding: 80px 6% 60px;
      border-bottom: 1px solid var(--border);
    }

.hero-wrapper {
      max-width: 780px;
      margin: 0 auto;
    }

.article-hero h1 {
      font-size: 2.5rem;
      line-height: 1.2;
      color: var(--white);
      margin-bottom: 1.5rem;
    }

.article-meta {
      display: flex;
      gap: 1.5rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.7);
    }

.back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--green);
      text-decoration: none;
      font-size: 0.85rem;
      margin-bottom: 2rem;
      transition: gap 0.3s ease;
    }

.back-link:hover {
      gap: 0.75rem;
    }

.article-body {
      max-width: 780px;
      margin: 0 auto;
      padding: 3rem 6%;
    }

.article-body p {
      margin-bottom: 1.5rem;
      line-height: 1.8;
      color: #e0e0ed;
    }

.article-body h2 {
      font-size: 1.8rem;
      color: var(--white);
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

.article-body h3 {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.85);
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-weight: 600;
    }

.cta-section {
      max-width: 780px;
      margin: 2rem auto 0;
      padding: 2.5rem 6% 1rem;
    }

.cta-card h3 {
      font-size: 1.5rem;
      color: var(--white);
      margin-bottom: 1rem;
    }

.cta-card p {
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 2rem;
      line-height: 1.6;
    }

.cta-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

.btn {
      padding: 0.8rem 1.5rem;
      border-radius: 6px;
      border: none;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
    }

footer {
      background: var(--light);
      border-top: 1px solid var(--border);
      padding: 3rem 6%;
      margin-top: 4rem;
    }

.footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }

.footer-section h4 {
      color: var(--white);
      margin-bottom: 1rem;
      font-size: 0.95rem;
    }

.footer-section p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.85rem;
      line-height: 1.8;
      margin-bottom: 0.5rem;
    }

.footer-section a {
      color: var(--green);
      text-decoration: none;
      font-size: 0.85rem;
      transition: opacity 0.3s ease;
    }

.footer-section a:hover {
      opacity: 0.8;
    }

.footer-socials {
      display: flex;
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

.social-link {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--green);
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid var(--border);
    }

.social-link:hover {
      background: var(--green);
      color: var(--navy);
    }

.footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 2rem;
      text-align: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.8rem;
    }

.wa-float {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 60px;
      height: 60px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      z-index: 999;
      text-decoration: none;
    }

.wa-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

.wa-float svg {
      width: 32px;
      height: 32px;
    }

@media (max-width: 768px) {
      .nav-links {
        gap: 1rem;
        font-size: 0.75rem;
      }

      .article-hero h1 {
        font-size: 1.8rem;
      }

      .article-body h2 {
        font-size: 1.4rem;
      }

      .cta-buttons {
        flex-direction: column;
      }

      .btn {
        justify-content: center;
      }

      .wa-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
      }
    }

*,*::before,*::after{box-sizing:border-box}

:root{
      --eb-green:#6DB244;--eb-blue:#0497DA;--eb-yellow:#FFD006;
      --eb-white:#f0f0fa;--eb-bg:#0b0b14;--eb-light:#13131f;
    }

a{text-decoration:none}

#eb-nav{
      position:sticky;top:0;z-index:300;
      height:72px;
      background:rgba(11,11,20,0.94);
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid rgba(255,255,255,0.08);
      display:flex;align-items:center;justify-content:space-between;
      padding:0 4%;font-family:'Montserrat',sans-serif;overflow:hidden;
    }

.eb-logo{display:flex;align-items:center;gap:10px;text-decoration:none}

.eb-logo-wm{display:flex;flex-direction:column;line-height:1.1}

.eb-logo-brand{font-size:1.25rem;font-weight:800;color:#f0f0fa;letter-spacing:-0.02em}

.eb-logo-sub{font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:.06em}

.eb-nav-links{display:flex;align-items:center;gap:1.1rem;list-style:none;margin:0;padding:0;flex-shrink:1;min-width:0}

.eb-nav-links a{font-size:.82rem;font-weight:600;color:rgba(255,255,255,0.65);transition:color .2s}

.eb-nav-links a:hover,.eb-nav-links a.active{color:#f0f0fa}

.eb-nav-login{border:1.5px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.75)!important;
      padding:0.45rem 1rem;border-radius:8px;font-size:.82rem;font-weight:700;
      transition:border-color .2s,color .2s,background .2s;white-space:nowrap;flex-shrink:0}

.eb-nav-login:hover{border-color:rgba(255,255,255,0.5);color:#fff!important;background:rgba(255,255,255,0.07)!important}

.eb-nav-cta{background:#6DB244!important;color:#fff!important;
      padding:.55rem 1.25rem;border-radius:8px;font-size:.82rem;
      font-weight:700;white-space:nowrap;flex-shrink:0;
      transition:background .2s!important}

.eb-nav-cta:hover{background:#5a9738!important}

.eb-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;
      background:none;border:none;padding:4px}

.eb-hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);
      border-radius:2px;transition:.3s}

.eb-mobile-nav{display:none;position:fixed;inset:72px 0 0 0;
      background:#0f0f1a;z-index:290;padding:2rem 6%;
      flex-direction:column;gap:1.25rem;overflow-y:auto}

.eb-mobile-nav.open{display:flex}

.eb-mobile-nav a{font-size:1.1rem;font-weight:600;color:rgba(255,255,255,.75);padding:.5rem 0;
      border-bottom:1px solid rgba(255,255,255,.06)}

.eb-mobile-nav a:last-child{background:#6DB244;color:#fff!important;
      text-align:center;border-radius:10px;border:none;padding:.85rem;margin-top:.5rem}

@media(max-width:900px){
      .eb-nav-links{display:none}
      .eb-hamburger{display:flex}
    }

#eb-footer{background:#07070f;padding:3.5rem 6% 0;font-family:'Montserrat',sans-serif}

.eb-footer-inner{max-width:1140px;margin:0 auto}

.eb-footer-grid{
      display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;
      padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.07)
    }

.eb-footer-brand p{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:280px;margin:.75rem 0 .5rem}

.eb-footer-brand small{font-size:.8rem;color:rgba(255,255,255,0.5)}

.eb-footer-col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;
      letter-spacing:.1em;color:rgba(255,255,255,0.5);margin:0 0 1rem}

.eb-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}

.eb-footer-col a{font-size:.85rem;color:rgba(255,255,255,.55);transition:color .2s}

.eb-footer-col a:hover{color:#f0f0fa}

.eb-footer-bottom{padding:1.5rem 0;display:flex;align-items:center;
      justify-content:space-between;flex-wrap:wrap;gap:1rem}

.eb-footer-copy{font-size:.78rem;color:rgba(255,255,255,0.5)}

.eb-footer-socials{display:flex;gap:.6rem}

.eb-social-btn{width:36px;height:36px;background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);border-radius:8px;
      display:flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,.45);transition:background .2s,color .2s,border-color .2s}

.eb-social-btn:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}

@media(max-width:900px){.eb-footer-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.eb-footer-grid{grid-template-columns:1fr}
      .eb-footer-bottom{flex-direction:column;align-items:flex-start}}

.eb-wa-float{
      position:fixed;bottom:20px;right:20px;z-index:999;
      display:flex;align-items:center;gap:7px;
      background:#25D366;color:white;text-decoration:none;
      padding:0 14px 0 10px;height:44px;border-radius:22px;
      box-shadow:0 4px 20px rgba(37,211,102,.4);
      transition:box-shadow .25s,transform .25s;
      font-size:.78rem;font-weight:700;font-family:'Montserrat',sans-serif;white-space:nowrap;
    }

.eb-wa-float:hover{box-shadow:0 6px 28px rgba(37,211,102,.55);transform:translateY(-2px)}

@media(max-width:480px){
      .eb-wa-float{padding:0;width: 44px;justify-content:center;border-radius:50%}
      .eb-wa-float .eb-wa-label{display:none}
    }

.eb-footer-recognition{
      padding:1.5rem 0 1rem;
      border-bottom:1px solid rgba(255,255,255,.07);
      margin-bottom:0;
    }

.eb-recog-label{
      font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
      color:rgba(255,255,255,0.5);margin-bottom:1rem;font-family:'Montserrat',sans-serif;
    }

.eb-recog-badges{
      display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
    }

.eb-recog-badge{
      display:flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.09);
      border-radius:8px;padding:.55rem 1rem;
      text-decoration:none;
      transition:background .2s,border-color .2s;
    }

.eb-recog-badge:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}

.eb-recog-badge-text{display:flex;flex-direction:column;line-height:1.25;}

.eb-recog-badge-title{font-size:.72rem;font-weight:800;color:#f0f0fa;letter-spacing:.01em;}

.eb-recog-badge-sub{font-size:.62rem;font-weight:500;color:rgba(255,255,255,0.5);margin-top:1px;}

.tags-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

.tag-chip {
      display: inline-block; padding: 0.4rem 0.9rem; border-radius: 100px;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      background: rgba(4,151,218,0.15); color: var(--blue); border: 1px solid rgba(4,151,218,0.25);
    }

.tag-chip.alt { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border-color: var(--border); }

.stat-highlight {
      display: flex; align-items: center; gap: 1.5rem;
      background: linear-gradient(135deg, rgba(109,178,68,0.12), rgba(255,255,255,0.02));
      border: 1px solid rgba(109,178,68,0.28); border-radius: 12px;
      padding: 1.5rem 1.75rem; margin: 2rem 0;
    }

.stat-highlight .stat-num { font-size: 2.1rem; font-weight: 900; color: var(--green); line-height: 1; white-space: nowrap; }

.stat-highlight .stat-desc { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.55; }

.article-layout {
      max-width: 1120px; margin: 0 auto; padding: 3rem 6% 1rem;
      display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start;
    }

.article-layout .article-body { max-width: none; margin: 0; padding: 0; }

.article-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.25rem; }

.sidebar-card {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem;
    }

.sidebar-label {
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.45); margin-bottom: 0.9rem;
    }

.sidebar-product-icon {
      width: 42px; height: 42px; border-radius: 10px; margin-bottom: 0.9rem;
      display: flex; align-items: center; justify-content: center;
    }

.sidebar-card h4 { font-size: 1rem; font-weight: 800; color: var(--white); margin-bottom: 0.5rem; }

.sidebar-card p { font-size: 0.84rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 1rem; }

.sidebar-card .btn { width: 100%; text-align: center; justify-content: center; font-size: 0.85rem; padding: 0.65rem 1rem; }

.sidebar-card.wa-card { border-top: 2px solid #25D366; }

.sidebar-card.wa-card .sidebar-product-icon { background: rgba(37,211,102,0.15); }

@media (max-width: 1020px) {
      .article-layout { grid-template-columns: 1fr; }
      .article-sidebar { position: static; }
    }

.faq-block { margin: 2.5rem 0; }

.faq-block > h2 { margin-bottom: 1.25rem; }

.faq-item { border-bottom: 1px solid var(--border); padding: 0; }

.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-q {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      background: none; border: none; text-align: left; cursor: pointer; padding: 1.1rem 0;
      font-family: inherit;
    }

.faq-q h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--white); }

.faq-chevron { flex-shrink: 0; color: var(--green); transition: transform 0.3s ease; }

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.js .faq-a { overflow: hidden; height: 0; }

.faq-a p { font-size: 0.92rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0 0 1.35rem; }

.related-reading { margin: 2.5rem 0 0; }

.related-reading-label {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.45); margin-bottom: 0.75rem;
    }

.related-list { border-top: 1px solid var(--border); }

.related-row {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 0.25rem; border-bottom: 1px solid var(--border);
      text-decoration: none; transition: padding-left 0.2s ease;
    }

.related-row:hover { padding-left: 0.5rem; }

.related-row-tag {
      flex-shrink: 0; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--green); background: rgba(109,178,68,0.12); border: 1px solid rgba(109,178,68,0.28);
      border-radius: 100px; padding: 0.3rem 0.7rem;
    }

.related-row-text { flex: 1; min-width: 0; }

.related-row-title { display: block; font-size: 0.92rem; font-weight: 700; color: var(--white); line-height: 1.4; }

.related-row-desc { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin-top: 0.25rem; }

.related-row-arrow { flex-shrink: 0; font-size: 0.9rem; color: var(--green); transition: transform 0.2s ease; }

.related-row:hover .related-row-arrow { transform: translateX(4px); }