  
    :root{
      --navy:#123a57;
      --navy-2:#0b2c45;
      --gold:#f5b335;
      --text:#0b1220;
    }

    /* ============ Navbar ============ */
    .nb-navbar{
      background: var(--navy);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nb-brand{
      color:#fff;
      letter-spacing:.06em;
      font-weight:800;
      text-transform:uppercase;
      display:flex;
      align-items:center;
      gap:.6rem;
      text-decoration:none;
    }
    .nb-logo-mark{
      width:22px;
      height:22px;
      border:2px solid var(--gold);
      border-radius:4px;
      display:inline-block;
      transform: rotate(45deg);
    }
    .nb-nav-link{
      color: rgba(255,255,255,.85) !important;
      font-weight:600;
    }
    .nb-nav-link:hover{ color:#fff !important; }

    .btn-buy{
      background: linear-gradient(180deg, #f7c25a, #f0a52a);
      border: 0;
      color:#132033;
      font-weight:800;
      padding:.55rem 1rem;
      border-radius:.35rem;
      text-transform:uppercase;
      letter-spacing:.03em;
      box-shadow: 0 8px 18px rgba(0,0,0,.25);
    }
    .btn-buy:hover{ filter:brightness(0.97); }

    /* ============ Hero ============ */
    .hero{
      position:relative;
      overflow:hidden;
      color:#fff;
      min-height: 420px;
      
      background:
        radial-gradient(1200px 500px at 30% 40%, rgba(28,120,190,.30), transparent 60%),
        radial-gradient(900px 400px at 70% 20%, rgba(0,0,0,.35), transparent 55%),
        linear-gradient(90deg, #0e3553 0%, #081b2b 55%, #06090c 100%);
    }

    /* Faux "diamond plate" texture (no image needed) */
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.35;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, rgba(255,255,255,0) 8px 24px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 10px, rgba(0,0,0,0) 10px 28px);
      mix-blend-mode: overlay;
      pointer-events:none;
    }

    .hero .container{ position:relative; z-index:2; }

    .product-wrap{
      display:flex;
      justify-content:center;
      align-items:center;
      padding: 1rem;
    }
    .product-img{
      width:min(280px, 85%);
      height:auto;
      transform: rotate(-10deg);
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
    }

    .hero-title{
      font-size: clamp(2rem, 3.6vw, 3.3rem);
      font-weight: 900;
      letter-spacing: .03em;
      text-transform: uppercase;
      margin-bottom: .75rem;
      line-height:1.05;
    }
    .hero-sub{
      font-size: clamp(1.15rem, 1.8vw, 1.55rem);
      font-weight: 800;
      margin-bottom: .8rem;
      line-height:1.2;
    }
    .highlight{
      display:inline-block;
      background: #f3b22f;
      color: #0a1c2b;
      font-weight: 900;
      padding: .35rem .75rem;
      border-radius: .25rem;
      font-size: clamp(1.25rem, 2.1vw, 1.85rem);
      box-shadow: 0 10px 18px rgba(0,0,0,.25);
    }

    /* ============ Content Section ============ */
    .content{
      padding: 0.5rem 0;
      background:#fff;
      color:var(--text);
    }
    .content p{
      font-size: 1.2rem;
      line-height: 1.9;
      margin-bottom: 1.3rem;
    }
    .u-strong{
      font-weight: 800;
    }
    .u-underline{
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-decoration-color: #111;
      text-underline-offset: 3px;
      font-weight: 800;
    }
    .u-blue{
      color:#1f6fb6;
      font-weight: 800;
    }
    .big-line{
      margin-top: 2.2rem;
      font-size: clamp(2rem, 3.2vw, 3.1rem);
      font-weight: 900;
      letter-spacing: .02em;
    }
    .big-line .brand{
      color:#1f6fb6;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    /* ============ Responsive tweaks ============ */
    @media (max-width: 991.98px){
      .hero{ padding: 2.5rem 0; }
      .product-img{ transform: rotate(-6deg); }
      .hero-text{ text-align:center; }
      .product-wrap{ margin-bottom: 1rem; }
    }


  
  .nb-feature-section{
    background:#fff;
  }

  /* product */
  .nb-product-wrap{ position:relative; z-index:3; }
  .nb-product-img{
    max-width: 360px;
    width: min(360px, 90%);
    height:auto;
  }

  /* connectors svg */
  .nb-connectors{
    position:absolute;
    left:50%;
    top:92px;              /* tune based on your product image height */
    transform:translateX(-50%);
    width:min(1100px, 100%);
    height:220px;
    z-index:1;
    pointer-events:none;
  }
  .nb-connectors path{
    fill:none;
    stroke:#1b3c5a;
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:4 10;  /* dotted look */
    opacity:.95;
  }

  /* cards */
  .nb-card{
    position:relative;
    z-index:2;
    max-width: 320px;
  }

  .nb-icon{
    width:74px;
    height:74px;
    border-radius:999px;
    background:#f1b43a;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto -22px auto;
    border: 4px solid #0d2b45;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }

  .nb-card-inner{
    background:#d9ecff;
    border:2px solid #0d2b45;
    border-radius:10px;
    padding: 34px 18px 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,.06);
  }

  .nb-card-title{
    font-weight:900;
    color:#0d2b45;
    font-size: 1.35rem;
    line-height:1.2;
  }

  /* mobile: hide svg connectors and use simple dotted vertical connector per card */
  @media (max-width: 991.98px){
    .nb-product-img{ max-width: 320px; }
    .nb-card{ max-width: 520px; }
    .nb-icon{ margin-bottom: -18px; }
  }


  .nb-how{
    background:#d7ecff; /* light blue like screenshot */
  }

  .nb-title{
    font-weight:900;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    color:#111;
    letter-spacing:.2px;
  }

  .nb-gold{
    color:#d7a200;
    font-weight:900;
  }

  .nb-p{
    font-size: 1.05rem;
    line-height: 1.9;
    color:#0b1220;
    margin-bottom: 1rem;
  }

  .nb-strong{
    font-weight:800;
  }

  .nb-blue{
    color:#1c6cc5;
    font-weight:800;
  }

  .nb-sub{
    font-size: 1.15rem;
    font-weight: 900;
    color:#0b1220;
    line-height:1.4;
  }

  .nb-imgbox{
    max-width: 460px;
    border: 3px solid rgba(0,0,0,.2);
    border-radius: 6px;
    overflow:hidden;
    box-shadow: 0 12px 24px rgba(0,0,0,.10);
    background:#fff;
  }

  /* checklist */
  .nb-checklist{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap: 18px;
  }

  .nb-checklist li{
    display:flex;
    align-items:flex-start;
    gap: 14px;
    font-size: 1.03rem;
    line-height: 1.6;
    color:#1d5ea8; /* blue-ish like screenshot */
    font-weight: 800;
  }

  .nb-check{
    width:36px;
    height:36px;
    border-radius:999px;
    background:#f1b43a; /* yellow circle */
    border: 2px solid #0d2b45;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 36px;
    box-shadow: 0 8px 16px rgba(0,0,0,.10);
    margin-top:2px;
  }

  /* spacing on small screens */
  @media (max-width: 991.98px){
    .nb-imgbox{ margin: 0 auto; }
  }


  .nb-ingredients{
    color:#fff;
    background:
      radial-gradient(900px 450px at 15% 30%, rgba(44,140,220,.18), transparent 60%),
      linear-gradient(180deg, #050607, #050607);
    position:relative;
    overflow:hidden;
  }

  /* subtle diamond texture */
  .nb-ingredients:before{
    content:"";
    position:absolute; inset:0;
    opacity:.28;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 8px, rgba(255,255,255,0) 8px 24px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 10px, rgba(0,0,0,0) 10px 28px);
    pointer-events:none;
  }

  .nb-ingredients .container{ position:relative; z-index:2; }

  .nb-ing-title{
    font-weight:900;
    letter-spacing:.3px;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height:1.25;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  .nb-blue{
    color:#1b6fb8;
    font-weight:900;
    letter-spacing:.08em;
  }

  .nb-ing-card{
    text-align:center;
    padding: .25rem .25rem 0;
  }

  .nb-thumb{
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 4px;
    overflow:hidden;
    background:#0b0f14;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }
  .nb-thumb img{
    width:100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display:block;
  }

  .nb-ing-name{
    margin-top: .9rem;
    margin-bottom: .45rem;
    color:#f1b43a; /* yellow titles */
    font-weight:900;
    font-size: 1.05rem;
    text-transform:none;
  }

  .nb-ing-text{
    margin:0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
    max-width: 320px;
    margin-inline:auto;
  }

  .nb-link{
    color:#2f89d8; /* blue emphasis like screenshot */
    font-weight:800;
  }

  /* center product */
  .nb-product-center{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 1rem 0;
  }
  .nb-jar{
    width: min(380px, 90%);
    filter: drop-shadow(0 20px 35px rgba(0,0,0,.55));
  }

  @media (max-width: 991.98px){
    .nb-product-center{ order: 6; } /* keeps jar between rows nicely */
    .nb-ing-text{ max-width: 520px; }
  }

  .nb-reviews{
    background:#d7ecff;
  }

  .nb-r-title{
    font-weight: 900;
    font-size: clamp(1.7rem, 2.5vw, 2.25rem);
    color:#111;
  }

  .nb-r-sub{
    display:inline-block;
    background:#0d2b45;
    color:#fff;
    font-weight:900;
    padding:.35rem .7rem;
    border-radius:.2rem;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  }

  .nb-avatar{
    width: 80px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(0,0,0,.25);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }

  .nb-name{
    font-weight: 900;
    color:#0b1220;
    line-height:1.15;
  }

  .nb-loc{
    font-size: .9rem;
    color:#0b1220;
    opacity:.9;
  }

  .nb-quote{
    margin:0;
    font-size: 1rem;
    line-height: 1.75;
    color:#0b1220;
    max-width: 840px;
  }

  .nb-bold{ font-weight: 900; }

  .nb-qmark{
    font-weight: 900;
  }

  .nb-meta{
    margin-top: .9rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
  }

  .nb-verified{
    font-weight: 900;
    font-size: .92rem;
    color:#0b1220;
    letter-spacing:.02em;
  }

  .nb-stars{
    color:#f1b43a;
    letter-spacing:.08em;
    font-size: 1.05rem;
    transform: translateY(-1px);
  }

  .nb-badge{
    background:#1aa64b;
    color:#fff;
    font-weight: 900;
    font-size: .78rem;
    padding: .18rem .5rem;
    border-radius: .2rem;
  }

  .nb-line{
    border:0;
    height:1px;
    background: rgba(13,43,69,.35);
    margin: 2rem 0;
  }

  @media (max-width: 767.98px){
    .nb-quote{ max-width: 100%; }
    .nb-meta{ justify-content:center; }
    .nb-name, .nb-loc{ text-align:center; }
  }

  .nb-bonus{
    background:#fff;
    color:#0b1220;
  }

  .nb-b-title{
    font-weight: 900;
    line-height: 1.25;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
  }

  .nb-gold{
    color:#d7a200;
    font-weight: 900;
  }

  .nb-highlight{
    background:#f1b43a;
    padding:.12rem .45rem;
    border-radius:.18rem;
    font-weight: 900;
  }

  /* bonus cards */
  .nb-b-card{
    border:1px solid rgba(0,0,0,.15);
    border-radius: 3px;
    overflow:hidden;
    box-shadow: 0 12px 26px rgba(0,0,0,.08);
    max-width: 920px;
    margin: 0 auto;
    background:#fff;
  }

  .nb-b-head{
    background:#0d2b45;
    padding:.6rem 1rem;
    text-align:center;
  }
  .nb-b-head-text{
    color:#fff;
    font-weight: 900;
    font-size: .95rem;
  }

  .nb-b-imgwrap{
    height: 100%;
    min-height: 220px;
    background:#111;
  }
  .nb-b-img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  .nb-b-body{
    padding: 1.2rem 1.2rem 1.1rem;
  }

  .nb-price-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.6rem;
    justify-content:center;
    margin-bottom:.7rem;
    font-weight: 900;
    font-size: 1.4rem;
  }

  .nb-rrp{ font-size: 1.3rem; }

  .nb-price-old{
    background:#f1b43a;
    padding:.12rem .5rem;
    border-radius:.15rem;
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: #b00000;
  }

  .nb-today{
    font-size: 1.3rem;
  }

  .nb-free{
    background:#f1b43a;
    padding:.12rem .55rem;
    border-radius:.15rem;
    font-weight: 900;
  }

  .nb-b-text{
    font-size: .95rem;
    line-height: 1.65;
    text-align:center;
    max-width: 520px;
    margin: 0 auto;
  }

  /* shipping strip */
  .nb-ship{
    max-width: 920px;
    margin: 0 auto;
    background:#f1b43a;
    border-radius: 3px;
    padding: .9rem 1rem;
    display:flex;
    align-items:center;
    gap: 14px;
  }
  .nb-ship-left{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .nb-ship-mid{
    flex:1;
    text-align:center;
  }
  .nb-ship-title{
    font-weight: 900;
    color:#0d2b45;
    font-size: 1.05rem;
    line-height:1.25;
  }
  .nb-ship-note{
    font-size: .85rem;
    color:#0d2b45;
    margin-top:.2rem;
  }

  /* bottom icons */
  .nb-mini{
    background:#d7ecff;
    border-radius: 3px;
    padding: 16px 10px;
    height: 100%;
    border: 1px solid rgba(13,43,69,.18);
  }
  .nb-mini-ico{
    width:54px; height:54px;
    margin:0 auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    background: rgba(255,255,255,.6);
  }
  .nb-mini-t{
    font-weight: 900;
    color:#0d2b45;
    font-size: .9rem;
    line-height: 1.2;
  }

  @media (max-width: 767.98px){
    .nb-price-line{ font-size: 1.15rem; }
    .nb-rrp, .nb-today{ font-size: 1.05rem; }
    .nb-b-text{ text-align:left; }
    .nb-ship{ flex-direction:column; text-align:center; }
  }

  .nb-pricing{
    color:#fff;
    background:
      radial-gradient(900px 450px at 20% 25%, rgba(35,120,185,.22), transparent 60%),
      linear-gradient(180deg, #0a2438, #071a2a);
    position:relative;
    overflow:hidden;
  }
  .nb-pricing:before{
    content:"";
    position:absolute; inset:0;
    opacity:.26;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 8px, rgba(255,255,255,0) 8px 24px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 10px, rgba(0,0,0,0) 10px 28px);
    pointer-events:none;
  }
  .nb-pricing .container{ position:relative; z-index:2; }

  .nb-topline{
    font-weight:900;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
  }
  .nb-underline{ text-decoration: underline; }
  .nb-chip{
    display:inline-block;
    background:#f1b43a;
    color:#0d2b45;
    font-weight:900;
    padding:.15rem .45rem;
    border-radius:.2rem;
    margin-left:.35rem;
  }

  .nb-card{
    background:#fff;
    color:#0b1220;
    border-radius: 4px;
    overflow:hidden;
    border: 2px solid rgba(13,43,69,.25);
    box-shadow: 0 18px 38px rgba(0,0,0,.35);
    position:relative;
  }

  .nb-card-head{
    padding: .7rem 1rem;
    text-align:center;
    font-weight:900;
  }
  .nb-card-head.light{
    background:#d7ecff;
    color:#0d2b45;
  }
  .nb-card-head.dark{
    background:#0d2b45;
    color:#fff;
  }
  .nb-pack-title{ font-size: 1.05rem; }
  .nb-pack{ font-size: .95rem; }

  .nb-card-body{
    padding: 1.1rem 1.1rem 1.3rem;
    text-align:center;
  }

  .nb-prod{
    width: 70%;
    max-width: 240px;
    height:auto;
    margin: .2rem auto .6rem;
    display:block;
  }
  .nb-prod.big{
    max-width: 280px;
  }

  .nb-price{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:.35rem;
    margin: .5rem 0 .65rem;
  }
  .nb-price-main{
    font-size: 2.3rem;
    font-weight: 1000;
    color:#0d2b45;
    line-height:1;
  }
  .nb-price-sub{
    font-weight:900;
    font-size: .9rem;
    color:#0d2b45;
    line-height:1.05;
    text-align:left;
  }
  .nb-price.featured .nb-price-main{
    font-size: 3.1rem;
  }

  .nb-list{
    list-style:none;
    padding:0;
    margin: 0 auto 1rem;
    max-width: 270px;
    text-align:left;
    font-weight: 800;
    font-size: .86rem;
    color:#0d2b45;
    display:flex;
    flex-direction:column;
    gap:.4rem;
  }
  .ok{
    display:inline-flex;
    width:18px;
    height:18px;
    align-items:center;
    justify-content:center;
    background:#1aa64b;
    color:#fff;
    border-radius:999px;
    font-size:.75rem;
    margin-right:.45rem;
  }
  .no{
    display:inline-flex;
    width:18px;
    height:18px;
    align-items:center;
    justify-content:center;
    background:#c23030;
    color:#fff;
    border-radius:999px;
    font-size:.75rem;
    margin-right:.45rem;
  }

  .nb-btn{
    background: linear-gradient(180deg, #f7c25a, #f0a52a);
    border:0;
    color:#0d2b45;
    font-weight:1000;
    padding:.65rem .9rem;
    border-radius:.25rem;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
  }
  .nb-btn:hover{ filter:brightness(.97); }

  .nb-pay{
    display:flex;
    justify-content:center;
    gap:.35rem;
    flex-wrap:wrap;
  }
  .pay-pill{
    font-weight:1000;
    font-size:.72rem;
    padding:.15rem .35rem;
    border-radius:.2rem;
    background:#f3f4f6;
    color:#0d2b45;
    border:1px solid rgba(0,0,0,.12);
  }

  .nb-total{
    font-size:.9rem;
    font-weight:900;
  }
  .muted{
    font-weight:800;
    color: rgba(13,43,69,.85);
  }

  /* Featured card */
  .nb-featured{
    transform: translateY(-14px);
    border: 3px solid rgba(255,255,255,.85);
  }

  .nb-badge-free{
    position:absolute;
    top: 82px;
    left: 16px;
    background:#f1b43a;
    color:#0d2b45;
    font-weight:1000;
    font-size:.65rem;
    padding:.25rem .35rem;
    border-radius:.22rem;
    line-height:1.1;
    box-shadow: 0 10px 18px rgba(0,0,0,.2);
  }

  @media (max-width: 991.98px){
    .nb-featured{ transform:none; }
    .nb-badge-free{ top: 78px; }
  }

  .nb-guarantee{
    color:#fff;
    background:
      radial-gradient(900px 450px at 20% 25%, rgba(35,120,185,.20), transparent 60%),
      linear-gradient(180deg, #0a0b0c, #070809);
    position:relative;
    overflow:hidden;
  }

  /* subtle diamond plate texture */
  .nb-guarantee:before{
    content:"";
    position:absolute; inset:0;
    opacity:.25;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 8px, rgba(255,255,255,0) 8px 24px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 10px, rgba(0,0,0,0) 10px 28px);
    pointer-events:none;
  }
  .nb-guarantee .container{ position:relative; z-index:2; }

  .nb-g-title{
    font-weight: 1000;
    letter-spacing: .02em;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  }

  .nb-g-text p{
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255,255,255,.92);
    margin-bottom: 1rem;
  }

  .nb-hl{
    background:#f1b43a;
    color:#0d2b45;
    font-weight: 1000;
    padding: .12rem .35rem;
    border-radius: .15rem;
    white-space: nowrap;
  }

  /* Badge (simple CSS badge) */
  .nb-badge-wrap{
    display:flex;
    justify-content:center;
  }
  .nb-badge{
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #ffd776, #f1b43a 55%, #d78c10);
    border: 6px solid rgba(0,0,0,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
  }
  .nb-badge:before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:999px;
    border: 2px dashed rgba(0,0,0,.35);
  }
  .nb-badge-top{
    font-size:.7rem;
    font-weight:1000;
    color:#0d2b45;
    letter-spacing:.08em;
  }
  .nb-badge-mid{
    font-size:1.05rem;
    font-weight:1000;
    color:#0d2b45;
    padding:.1rem .4rem;
    background: rgba(0,0,0,.12);
    border-radius:.25rem;
    margin:.25rem 0;
  }
  .nb-badge-bottom{
    font-size:.75rem;
    font-weight:1000;
    color:#0d2b45;
    letter-spacing:.06em;
  }

  @media (max-width: 575.98px){
    .nb-hl{ white-space: normal; }
    .nb-g-text{ text-align:left !important; }
  }

  .nb-faq{
    background:#ffffff;
  }

  .nb-faq-title{
    font-weight: 900;
    color:#111;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  }

  .nb-acc{
    border-radius: 4px;
  }

  .nb-item{
    border: 1px solid rgba(13,43,69,.55);
    border-radius: 2px;
    overflow:hidden;
    background:#d7ecff;
    margin-bottom: 12px;
  }

  /* button */
  .nb-btn{
    background:#cfe3f7 !important;
    color:#0d2b45 !important;
    font-weight: 900;
    font-size: .95rem;
    padding: .75rem .9rem;
    box-shadow:none !important;
  }

  /* remove default bootstrap arrow background */
  .accordion-button::after{
    filter: brightness(0) saturate(100%) invert(12%) sepia(24%) saturate(2034%) hue-rotate(176deg) brightness(94%) contrast(94%);
  }

  /* body */
  .nb-body{
    background:#d7ecff;
    color:#0b1220;
    font-size: .95rem;
    line-height: 1.75;
    padding: 1rem 1rem 1.1rem;
  }

  /* spacing like screenshot */
  .accordion-item:last-child{ margin-bottom: 0; }

  .nb-green{
    color:#fff;
    background:
      radial-gradient(800px 400px at 15% 25%, rgba(60,180,90,.25), transparent 60%),
      linear-gradient(180deg, #0b5f1a, #064012);
    position:relative;
    overflow:hidden;
  }

  /* subtle texture */
  .nb-green:before{
    content:"";
    position:absolute; inset:0;
    opacity:.22;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, rgba(255,255,255,0) 8px 24px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 10px, rgba(0,0,0,0) 10px 28px);
    pointer-events:none;
  }
  .nb-green .container{ position:relative; z-index:2; }

  /* product */
  .nb-green-product{
    position:relative;
    display:inline-block;
  }
  .nb-green-jar{
    max-width: 240px;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,.5));
  }

  /* eco badge */
  .nb-green-badge{
    position:absolute;
    left:-16px;
    top:12px;
    width:88px;
    height:88px;
    border-radius:999px;
    background:#0a3f17;
    border:3px solid #e7f5ea;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 12px 26px rgba(0,0,0,.45);
  }
  .nb-green-badge-inner{
    text-align:center;
    line-height:1.1;
    font-weight:900;
    font-size:.55rem;
    letter-spacing:.04em;
  }
  .nb-green-badge-mid{
    font-size:.9rem;
    background:#5cd67a;
    color:#083016;
    padding:.15rem .35rem;
    border-radius:.2rem;
    margin-top:.15rem;
  }

  /* heading */
  .nb-green-title{
    font-weight:1000;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    text-decoration: underline;
  }

  .nb-green-partner{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }
  .nb-green-small{
    font-size:.6rem;
    opacity:.85;
    font-weight:800;
  }
  .nb-green-partner-name{
    font-weight:1000;
    letter-spacing:.08em;
  }

  .nb-green-text{
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255,255,255,.95);
  }

  .nb-green-brand{
    font-weight:1000;
    color:#b7f5c6;
  }

  .nb-green-highlight{
    background: rgba(0,0,0,.35);
    border-left: 4px solid #5cd67a;
    padding: .75rem .9rem;
    font-weight:900;
    font-size: 1rem;
  }
  .nb-green-highlight-text{
    color:#5cd67a;
  }

  @media (max-width: 991.98px){
    .nb-green-product{ margin-bottom: 1rem; }
    .nb-green-badge{ left:0; }
  }