:root{
      --bee-blue:#2d6cdf;
      --bee-blue-dark:#1f56bd;
      --bee-gold:#ffc928;
      --bee-soft:#eef3ff;
      --bee-deep:#0f172a;
      --bee-slate:#475569;
      --bee-bg:#f5f7fb;
      --bee-border:#e2e8f0;
      --bee-radius-lg:22px;
      --bee-radius-md:16px;
      --bee-shadow-soft:0 18px 45px rgba(15, 23, 42, 0.14);
      --bee-shadow-card:0 14px 32px rgba(15, 23, 42, 0.12);
    }

    .beelinger-front{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:radial-gradient(circle at top, #eef4ff 0, #f9fafb 52%, #f3f4f6 100%);
      color:var(--bee-deep);
      line-height:1.65;
    }

    .beelinger-front .container{
      max-width:1120px;
      margin:0 auto;
      padding:0 20px;
    }

    .beelinger-front a{
      color:var(--bee-blue);
      text-decoration:none;
    }
    .beelinger-front a:hover{
      color:var(--bee-blue-dark);
      text-decoration:underline;
    }

    .beelinger-front h1,
    .beelinger-front h2,
    .beelinger-front h3{
      font-weight:800;
      letter-spacing:-0.02em;
      color:var(--bee-deep);
      margin:0;
    }

    .beelinger-front h1{font-size:clamp(2.2rem, 3.1vw, 3rem);}
    .beelinger-front h2{font-size:clamp(1.7rem, 2.3vw, 2.15rem);}
    .beelinger-front h3{font-size:1.15rem;}

    .beelinger-front p{
      margin:0;
      font-size:1.02rem;
      color:var(--bee-slate);
    }

    .beelinger-front section{
      padding:clamp(2.6rem, 3.8vw, 3.8rem) 0;
    }

    .section-label{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:800;
      padding:.25rem .85rem;
      border-radius:999px;
      background:rgba(45,108,223,.08);
      color:#1d4ed8;
      margin-bottom:.9rem;
    }
    .section-label span{font-size:1rem;}

    .muted{color:#6b7280;}

    /* =========================
       HERO (Tools-first)
    ========================== */
    .hero{
      padding-top:clamp(2.4rem, 3.8vw, 3.4rem);
      padding-bottom:clamp(2.6rem, 3.8vw, 3.2rem);
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.25fr 1fr;
      gap:clamp(1.6rem, 3vw, 2.4rem);
      align-items:center;
    }
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr;}
    }

    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.28rem .9rem;
      border-radius:999px;
      background:rgba(45,108,223,.08);
      color:#1d4ed8;
      font-size:.84rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.12em;
      margin-bottom:.85rem;
    }
    .hero-kicker span{font-size:1.1rem;}

    .hero-sub{
      margin-top:.75rem;
      max-width:640px;
    }

    .hero-actions{
      margin-top:1.1rem;
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      align-items:center;
    }

    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.85rem 1.45rem;
      border-radius:999px;
      background:radial-gradient(circle at top left, #6aa1ff 0, #2d6cdf 40%, #1c3faa 100%);
      color:#fff !important;
      font-weight:800;
      font-size:.98rem;
      box-shadow:0 16px 40px rgba(37, 99, 235, 0.35);
      border:none;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, filter .1s ease;
      text-decoration:none !important;
      white-space:nowrap;
      text-shadow:0 2px 4px rgba(0,0,0,.35);
    }
    .btn-primary:hover{
      filter:brightness(1.02);
      transform:translateY(-1px);
      box-shadow:0 20px 46px rgba(15,23,42,0.4);
    }

    .btn-secondary{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.7rem 1.05rem;
      border-radius:999px;
      background:rgba(15,23,42,.04);
      border:1px solid rgba(148,163,184,.55);
      color:#111827;
      font-weight:700;
      font-size:.9rem;
      cursor:pointer;
      transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
      text-decoration:none !important;
      white-space:nowrap;
    }
    .btn-secondary:hover{
      background:rgba(148,163,184,.12);
      box-shadow:0 12px 26px rgba(15, 23, 42, 0.18);
      transform:translateY(-1px);
    }

    /* Search card */
    .search-card{
      background:#fff;
      border-radius:var(--bee-radius-lg);
      padding:1.35rem 1.4rem;
      border:1px solid rgba(148,163,184,.55);
      box-shadow:var(--bee-shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .search-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at top left, rgba(239,246,255,.95) 0, transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .search-card-inner{position:relative; z-index:2;}

    .search-title{
      font-size:1.05rem;
      font-weight:900;
      margin-bottom:.35rem;
      color:#111827;
    }
    .search-desc{
      font-size:.95rem;
      color:#4b5563;
      margin-bottom:.85rem;
    }

    .search-form{
      display:flex;
      gap:.6rem;
      align-items:stretch;
    }
    @media (max-width: 520px){
      .search-form{flex-direction:column;}
    }
    .search-input{
      flex:1;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.75);
      padding:.78rem 1rem;
      font-size:.95rem;
      background:#f8fafc;
      color:#0f172a;
      outline:none;
    }
    .search-input:focus{
      border-color:rgba(45,108,223,.75);
      box-shadow:0 0 0 4px rgba(45,108,223,.12);
    }

    .search-btn{
      border-radius:999px;
      padding:.78rem 1.1rem;
      font-weight:800;
      border:0;
      cursor:pointer;
      color:#fff;
      background:radial-gradient(circle at top left, #4f8dff 0, #2d6cdf 40%, #1c3faa 100%);
      box-shadow:0 14px 34px rgba(37,99,235,.28);
      white-space:nowrap;
    }
    .search-btn:hover{filter:brightness(1.03);}

    .search-suggestions{
      margin-top:.9rem;
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      font-size:.86rem;
      color:#64748b;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.24rem .62rem;
      border-radius:999px;
      background:rgba(15,23,42,.03);
      border:1px dashed rgba(148,163,184,.65);
      cursor:pointer;
      user-select:none;
    }
    .chip:hover{background:rgba(224,231,255,.7);}

    /* =========================
       TOOLS CATEGORY GRID
    ========================== */
    .tools-section{
      padding-top:0.5rem;
    }

    .tools-header{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:1.25rem;
    }
    .tools-header p{max-width:640px;}

    .tools-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.95rem;
    }
    @media (max-width: 920px){
      .tools-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    }
    @media (max-width: 600px){
      .tools-grid{grid-template-columns:1fr;}
    }

    .tool-card{
      background:#fff;
      border-radius:var(--bee-radius-md);
      padding:1.1rem 1.1rem;
      border:1px solid rgba(148,163,184,.6);
      box-shadow:0 10px 24px rgba(15,23,42,.12);
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
      min-height:110px;
    }
    .tool-card:hover{
      background:#f0f5ff;
      transform:translateY(-2px);
      box-shadow:0 14px 28px rgba(15,23,42,.14);
      text-decoration:none;
    }

    .tool-ico{
      width:40px;
      height:40px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.25rem;
      background:#0f172a;
      color:#facc15;
      flex:0 0 auto;
    }

    .tool-meta{
      display:flex;
      flex-direction:column;
      gap:.25rem;
      min-width:0;
    }
    .tool-title{
      font-weight:900;
      color:#111827;
      font-size:1rem;
      line-height:1.2;
    }
    .tool-desc{
      font-size:.92rem;
      color:#475569;
    }
    .tool-cta{
      margin-top:.35rem;
      font-size:.86rem;
      font-weight:800;
      color:#1d4ed8;
      display:inline-flex;
      align-items:center;
      gap:.25rem;
      white-space:nowrap;
    }

    /* =========================
       FEATURED REVIEWS / COMPARISONS
    ========================== */
    .feature-section{
      border-top:1px solid rgba(148,163,184,.35);
      padding-top:clamp(2.3rem, 3.2vw, 3.1rem);
    }

    .feature-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
      gap:1.2rem;
      align-items:stretch;
    }
    @media (max-width: 960px){
      .feature-grid{grid-template-columns:1fr;}
    }

    .feature-card{
      background:#fff;
      border-radius:var(--bee-radius-lg);
      border:1px solid rgba(148,163,184,.55);
      box-shadow:var(--bee-shadow-card);
      padding:1.35rem 1.35rem;
      position:relative;
      overflow:hidden;
    }
    .feature-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at top left, rgba(239,246,255,.95) 0, transparent 60%);
      opacity:.95;
      pointer-events:none;
    }
    .feature-inner{position:relative; z-index:2;}

    .feature-kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-bottom:.55rem;
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:900;
      color:#4b5563;
    }
    .feature-kicker .badge{
      padding:.18rem .6rem;
      border-radius:999px;
      background:rgba(37,99,235,.07);
      color:#1d4ed8;
    }

    .feature-title{
      font-size:1.2rem;
      font-weight:950;
      color:#0f172a;
      margin-bottom:.35rem;
    }
    .feature-text{
      color:#475569;
      font-size:.96rem;
      margin-bottom:.9rem;
    }

    .feature-list{
      list-style:none;
      padding:0;
      margin:.2rem 0 0;
      display:grid;
      gap:.65rem;
    }

    .mini-item{
      display:flex;
      justify-content:space-between;
      gap:.9rem;
      align-items:flex-start;
      padding:.8rem .9rem;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(248,250,252,.96), rgba(224,231,255,.92));
      border:1px solid rgba(148,163,184,.55);
      box-shadow:0 8px 22px rgba(15,23,42,.10);
    }
    .mini-main{min-width:0;}
    .mini-label{
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#6b7280;
      margin-bottom:.2rem;
    }
    .mini-title{
      font-weight:950;
      color:#111827;
      margin-bottom:.15rem;
    }
    .mini-desc{
      font-size:.92rem;
      color:#475569;
    }
    .mini-cta{
      font-weight:900;
      font-size:.86rem;
      white-space:nowrap;
      color:#1d4ed8;
      display:inline-flex;
      align-items:center;
      gap:.25rem;
      margin-left:.6rem;
      flex:0 0 auto;
    }

    /* Footer note */
    .front-footer-note{
      padding:1.4rem 0 2.4rem;
      border-top:1px solid rgba(148,163,184,.3);
      font-size:.88rem;
      color:#6b7280;
      text-align:center;
    }
    .front-footer-note span{font-weight:800; color:#111827;}
    
    .top-searches{
  margin-top:.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.top-search{
  appearance:none;
  border:1px solid rgba(148,163,184,.65);
  background:rgba(248,250,252,.95);
  color:#0f172a;
  padding:.38rem .7rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.top-search:hover{
  background:rgba(224,231,255,.85);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}

.top-search:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(45,108,223,.14);
  border-color:rgba(45,108,223,.6);
}


/* ---------------------------
   TRUST / CREDIBILITY STATS
---------------------------- */
.trust-section{
  padding-top: clamp(2.4rem, 3.6vw, 3.4rem);
  padding-bottom: clamp(2.6rem, 3.8vw, 3.8rem);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.trust-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items:center;
}

@media (max-width: 960px){
  .trust-grid{ grid-template-columns: 1fr; }
}

.trust-media{
  border-radius: var(--bee-radius-lg);
  overflow:hidden;
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: var(--bee-shadow-card);
  background: radial-gradient(circle at top, rgba(239,246,255,.95) 0, rgba(224,231,255,.55) 45%, rgba(241,245,249,.9) 100%);
  position:relative;
}

.trust-media:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top left, rgba(45,108,223,.18) 0, transparent 55%);
  pointer-events:none;
}

.trust-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 1 / 1;
}

.trust-copy h2{
  margin: 0 0 0.45rem;
}

.trust-subhead{
  max-width: 58ch;
  margin: 0 0 1.2rem;
  font-size: 1.02rem;
}

.trust-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .4rem;
}

@media (max-width: 640px){
  .trust-stats{ grid-template-columns: 1fr; }
}

.trust-stat{
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: var(--bee-radius-md);
  padding: 1.05rem 1.1rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  position:relative;
  overflow:hidden;
}

.trust-stat:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top left, rgba(239,246,255,.95) 0, transparent 60%);
  pointer-events:none;
}

.trust-number{
  position:relative;
  z-index:1;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  color: var(--bee-deep);
  line-height: 1.05;
  margin-bottom: .35rem;
}

.trust-label{
  position:relative;
  z-index:1;
  font-weight: 800;
  color: #111827;
  font-size: .98rem;
  margin-bottom: .2rem;
}

.trust-note{
  position:relative;
  z-index:1;
  color: #6b7280;
  font-size: .88rem;
}

.trust-actions{
  display:flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items:center;
  margin-top: 1.25rem;
}

.trust-fineprint{
  margin-top: .85rem;
  font-size: .86rem;
  color: #6b7280;
  max-width: 70ch;
}


.bee-news { padding: clamp(2.5rem, 4vw, 3.9rem) 0; }

.news-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.15rem;
}
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .news-grid{ grid-template-columns: 1fr; } }

.news-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding: 1.05rem 1.1rem;
  box-shadow: 0 12px 28px rgba(15,23,42,0.06);
  min-height: 210px;
  transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.news-card:hover{
  transform: translateY(-2px);
  border-color:#d1d5db;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10);
}

.news-meta{ display:flex; justify-content:space-between; gap:.6rem; align-items:center; margin-bottom:.45rem; }
.news-date{ font-size:.82rem; color:#64748b; font-weight:700; }
.news-pill{
  font-size:.72rem;
  padding:.14rem .5rem;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-weight:800;
  white-space:nowrap;
}

.news-title{ margin:0; font-size:1.02rem; line-height:1.25; }
.news-title a{ color:#0f172a; text-decoration:none; font-weight:900; }
.news-title a:hover{ color:#1f56bd; text-decoration:underline; }

.news-excerpt{ margin:.55rem 0 0; color:#475569; font-size:.92rem; }
.news-cta{ margin-top:.7rem; display:inline-block; font-weight:900; font-size:.9rem; }

.news-actions{ margin-top:1.2rem; display:flex; gap:.85rem; flex-wrap:wrap; }
.news-empty{
  background:#ffffff;
  border:1px dashed rgba(45,108,223,0.35);
  border-radius:18px;
  padding: 1rem 1.05rem;
}

/* News image (top thumbnail) + placeholder */
.news-thumb{
  display:block;
  margin:.55rem 0 .65rem;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f8fafc;
}
.news-thumb img{
  width:100%;
  height:160px;          /* consistent card height */
  object-fit:cover;      /* clean crop */
  display:block;
}
.news-thumb--placeholder{
  height:160px;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 55%, #e0f2fe 100%);
}

/* Mobile tweak */
@media (max-width: 640px){
  .news-thumb img{ height:140px; }
  .news-thumb--placeholder{ height:140px; }
}

@media (max-width: 640px){
  .beelinger-front{
    background:#f7f9ff; /* remove heavy radial background */
  }

  .search-card,
  .feature-card,
  .tool-card,
  .trust-media,
  .trust-stat,
  .news-card{
    box-shadow: 0 6px 14px rgba(15,23,42,.10); /* lighter shadow */
  }

  .feature-card:before,
  .search-card:before,
  .trust-media:before,
  .trust-stat:before{
    opacity: .55; /* reduce gradient overlay paint */
  }
}

/* Skip rendering below-the-fold sections until needed */
.bee-news,
.tools-section,
.feature-section,
.trust-section{
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px; /* reserve space to reduce layout jump */
}

@media (max-width: 640px){
  .beelinger-home-tools .top-searches{
    display: none !important;
  }
}