/* =========================================================
   SELLIFYY — BEYOND THE BRAND
   CONTENT ONLY. NO HEADER / FOOTER.
   Scoped so it can be inserted into the current front website.
   ========================================================= */
.sfbb{
  --p:#6f3cff;
  --p2:#8b5cff;
  --g:#22c55e;
  --ink:#171329;
  --muted:#6f6a7d;
  --soft:#f7f5ff;
  --soft2:#fbfaff;
  --line:#e9e5f2;
  --white:#fff;
  --dark:#171329;
  --shadow:0 18px 50px rgba(50,34,90,.10);
  --max:1200px;

  width:100%;
  overflow:hidden;
  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.6;
}
.sfbb*,.sfbb*::before,.sfbb*::after{box-sizing:border-box}
.sfbb img{display:block;width:100%;max-width:100%}
.sfbb a{text-decoration:none;color:inherit}
.sfbb button,.sfbb input{font:inherit}
.sfbb .wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.sfbb h1,.sfbb h2,.sfbb h3,.sfbb h4{margin:0;color:var(--ink);line-height:1.08}
.sfbb h1{font-size:clamp(46px,6.3vw,78px);letter-spacing:-3.3px}
.sfbb h2{font-size:clamp(31px,4vw,49px);letter-spacing:-1.9px}
.sfbb h3{font-size:18px}
.sfbb p{margin:0;color:var(--muted)}
.sfbb .gradient{background:linear-gradient(90deg,var(--p),#a13dff,var(--g));-webkit-background-clip:text;background-clip:text;color:transparent}
.sfbb .kicker{color:var(--p);font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:11px}
.sfbb .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #ded4ff;border-radius:999px;background:#faf8ff;color:var(--p);font-size:11px;font-weight:900}
.sfbb .section{padding:84px 0}
.sfbb .head{max-width:790px;margin-bottom:36px}
.sfbb .head p{margin-top:11px;font-size:14px}
.sfbb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-size:12px;font-weight:900}
.sfbb .btn-primary{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 12px 28px rgba(111,60,255,.22)}
.sfbb .btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* HERO */
.sfbb .hero{
  position:relative;
  padding:76px 0 54px;
  background:
    radial-gradient(circle at 12% 12%,rgba(111,60,255,.12),transparent 27%),
    radial-gradient(circle at 90% 15%,rgba(34,197,94,.08),transparent 23%),
    linear-gradient(180deg,#fff,#fbfaff);
}
.sfbb .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(rgba(67,42,75,.13) .65px,transparent .8px),radial-gradient(rgba(255,255,255,.82) .7px,transparent .9px);
  background-size:17px 17px,23px 23px;background-position:0 0,8px 7px;
}
.sfbb .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .86fr;gap:56px;align-items:end}
.sfbb .hero-copy p{margin-top:18px;max-width:720px;font-size:17px}
.sfbb .hero-note{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:21px}
.sfbb .hero-note span{font-size:10px;font-weight:850;color:#5d5667}
.sfbb .hero-note span::before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#effcf4;color:var(--g);margin-right:6px}
.sfbb .search{
  padding:19px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:var(--shadow);backdrop-filter:blur(10px)
}
.sfbb .search label{display:block;font-size:10px;font-weight:900;color:#857d90;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.sfbb .search-row{display:flex;gap:9px}
.sfbb .search input{width:100%;height:48px;padding:0 15px;border:1px solid #ded8e8;border-radius:12px;outline:none;color:var(--ink);background:#fff}
.sfbb .search input:focus{border-color:#b49bff;box-shadow:0 0 0 4px rgba(111,60,255,.08)}
.sfbb .search button{flex:0 0 48px;height:48px;border:0;border-radius:12px;background:var(--p);color:#fff;font-size:18px;cursor:pointer}
.sfbb .popular-searches{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.sfbb .popular-searches button{padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#625b6d;font-size:8px;font-weight:800;cursor:pointer}

/* FEATURED MOSAIC */
.sfbb .featured{padding:48px 0 78px}
.sfbb .feature-grid{
  display:grid;
  grid-template-columns:1.05fr 1.45fr 1fr;
  grid-template-rows:238px 238px;
  gap:14px;
}
.sfbb .story{
  position:relative;overflow:hidden;min-width:0;border-radius:22px;background:#eee9f0;border:1px solid var(--line);cursor:pointer
}
.sfbb .story.main{grid-row:1/3;grid-column:2}
.sfbb .story.left-top{grid-column:1;grid-row:1}
.sfbb .story.left-bottom{grid-column:1;grid-row:2}
.sfbb .story.right-top{grid-column:3;grid-row:1}
.sfbb .story.right-bottom{grid-column:3;grid-row:2}
.sfbb .story img{height:100%;object-fit:cover;filter:saturate(.78) contrast(.97)}
.sfbb .story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(20,13,29,.76) 100%)}
.sfbb .story.main::after{background:linear-gradient(180deg,transparent 48%,rgba(20,13,29,.80) 100%)}
.sfbb .story-content{position:absolute;z-index:2;left:18px;right:18px;bottom:17px;color:#fff}
.sfbb .story-content small{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.sfbb .story-content h3{color:#fff;font-size:18px;margin-top:8px;letter-spacing:-.3px}
.sfbb .story.main .story-content h3{font-size:29px}
.sfbb .story-content p{color:#e9e4ed;font-size:9px;margin-top:6px}
.sfbb .story-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:7px;color:#ded7e4;font-size:8px;font-weight:700}

/* CONTROLS */
.sfbb .articles{background:#fff}
.sfbb .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.sfbb .tabs{display:flex;gap:7px;flex-wrap:wrap}
.sfbb .tab{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#625a6d;font-size:9px;font-weight:850;cursor:pointer}
.sfbb .tab.active{background:var(--p);border-color:var(--p);color:#fff}
.sfbb .count{font-size:10px;font-weight:800;color:#8d8695}

/* ARTICLE GRID */
.sfbb .article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 16px}
.sfbb .article{min-width:0}
.sfbb .article-image{
  position:relative;overflow:hidden;aspect-ratio:1.15/1;border-radius:18px;background:#eee9f0;border:1px solid var(--line);cursor:pointer
}
.sfbb .article-image img{height:100%;object-fit:cover;filter:saturate(.82) contrast(.97);transition:.35s ease}
.sfbb .article:hover .article-image img{transform:scale(1.035)}
.sfbb .article-image::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
  background-image:radial-gradient(rgba(45,25,52,.22) .6px,transparent .8px);
  background-size:19px 19px
}
.sfbb .article-badge{position:absolute;z-index:3;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:#4c3c50;font-size:7.5px;font-weight:900}
.sfbb .quick-view{position:absolute;z-index:4;right:10px;bottom:10px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:var(--p);box-shadow:0 7px 20px rgba(0,0,0,.13);cursor:pointer;opacity:0;transform:translateY(5px);transition:.2s}
.sfbb .article:hover .quick-view{opacity:1;transform:none}
.sfbb .article-copy{padding:11px 2px 0}
.sfbb .article-copy h3{font-size:13px;line-height:1.25;cursor:pointer}
.sfbb .article-copy h3:hover{color:var(--p)}
.sfbb .article-copy p{font-size:9px;line-height:1.5;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sfbb .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;color:#8a8393;font-size:8px}
.sfbb .dot{width:3px;height:3px;border-radius:50%;background:#bbb4c3}
.sfbb .article[hidden]{display:none}

/* LOAD MORE */
.sfbb .load-row{display:flex;justify-content:center;margin-top:42px}
.sfbb .load-more{min-width:145px}
.sfbb .load-more[hidden]{display:none}

/* NEWSLETTER */
.sfbb .newsletter{padding:78px 0;background:linear-gradient(120deg,#6f3cff,#7a45e4 58%,#2cbf68);color:#fff;text-align:center}
.sfbb .newsletter h2{color:#fff;max-width:760px;margin:auto}
.sfbb .newsletter p{max-width:650px;margin:12px auto 22px;color:#eee8ff;font-size:13px}
.sfbb .newsletter-form{display:flex;gap:8px;max-width:530px;margin:auto}
.sfbb .newsletter-form input{width:100%;height:48px;padding:0 15px;border:0;border-radius:12px;outline:none}
.sfbb .newsletter-form button{white-space:nowrap}

/* ACADEMY */
.sfbb .academy{background:#fbfafc}
.sfbb .academy-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.sfbb .course{overflow:hidden;border:1px solid var(--line);border-radius:19px;background:#fff}
.sfbb .course-image{height:190px;overflow:hidden}
.sfbb .course-image img{height:100%;object-fit:cover;filter:saturate(.75)}
.sfbb .course-copy{padding:14px}
.sfbb .course-copy h3{font-size:13px}
.sfbb .course-copy p{font-size:9px;margin-top:5px}
.sfbb .course-copy a{display:inline-flex;margin-top:11px;color:var(--p);font-size:8.5px;font-weight:900}

/* END CTA */
.sfbb .end-cta{padding:72px 0}
.sfbb .end-box{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sfbb .end-card{padding:30px;border:1px solid var(--line);border-radius:22px;background:#f9f7fc}
.sfbb .end-card h3{font-size:27px;letter-spacing:-.8px}
.sfbb .end-card p{font-size:11px;margin:9px 0 17px}

/* MODAL */
.sfbb-modal{
  position:fixed;inset:0;z-index:999999;display:none;place-items:center;padding:20px;background:rgba(14,10,23,.74);backdrop-filter:blur(10px)
}
.sfbb-modal.open{display:grid}
.sfbb-modal-card{width:min(850px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.26)}
.sfbb-modal-close{position:sticky;float:right;top:12px;margin:12px 12px -48px 0;z-index:4;width:36px;height:36px;border:0;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.14);cursor:pointer;font-size:18px}
.sfbb-modal-hero{height:300px;overflow:hidden}
.sfbb-modal-hero img{height:100%;object-fit:cover}
.sfbb-modal-body{padding:28px}
.sfbb-modal-cat{color:var(--p);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.sfbb-modal-body h2{font-size:34px;margin-top:7px}
.sfbb-modal-body>p{font-size:13px;margin-top:10px}
.sfbb-modal-meta{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:13px;color:#888192;font-size:9px}
.sfbb-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0}
.sfbb-modal-grid span{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfafc;color:#5d5668;font-size:10px;font-weight:800}
.sfbb-modal-grid span::before{content:"✓";color:var(--g);margin-right:6px}
.sfbb-modal-actions{display:flex;gap:10px;flex-wrap:wrap}

/* TOAST */
.sfbb-toast{position:fixed;z-index:1000000;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 15px;border-radius:999px;background:#171329;color:#fff;font-size:10px;font-weight:800;transition:.2s}
.sfbb-toast.show{opacity:1;transform:translate(-50%,0)}

/* RESPONSIVE */
@media(max-width:1000px){
  .sfbb .hero-grid{grid-template-columns:1fr}
  .sfbb .feature-grid{grid-template-columns:1fr 1.3fr;grid-template-rows:220px 220px 220px}
  .sfbb .story.main{grid-column:2;grid-row:1/3}
  .sfbb .story.left-top{grid-column:1;grid-row:1}
  .sfbb .story.left-bottom{grid-column:1;grid-row:2}
  .sfbb .story.right-top{grid-column:1;grid-row:3}
  .sfbb .story.right-bottom{grid-column:2;grid-row:3}
  .sfbb .article-grid{grid-template-columns:repeat(3,1fr)}
  .sfbb .academy-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .sfbb .wrap{width:min(100% - 28px,var(--max))}
  .sfbb .hero{padding:52px 0 38px}
  .sfbb h1{font-size:clamp(40px,12vw,54px);letter-spacing:-2.2px}
  .sfbb h2{font-size:clamp(30px,9vw,40px);letter-spacing:-1.3px}
  .sfbb .hero-copy p{font-size:15px}
  .sfbb .section{padding:60px 0}
  .sfbb .featured{padding:30px 0 60px}
  .sfbb .feature-grid{
    display:flex;overflow-x:auto;gap:11px;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none
  }
  .sfbb .feature-grid::-webkit-scrollbar{display:none}
  .sfbb .story,.sfbb .story.main,.sfbb .story.left-top,.sfbb .story.left-bottom,.sfbb .story.right-top,.sfbb .story.right-bottom{
    flex:0 0 84%;height:320px;scroll-snap-align:start;grid-column:auto;grid-row:auto
  }
  .sfbb .story.main .story-content h3{font-size:22px}
  .sfbb .toolbar{align-items:flex-start;flex-direction:column}
  .sfbb .tabs{flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .sfbb .tabs::-webkit-scrollbar{display:none}
  .sfbb .tab{white-space:nowrap}
  .sfbb .article-grid{grid-template-columns:repeat(2,1fr);gap:22px 10px}
  .sfbb .article-image{border-radius:15px}
  .sfbb .article-copy h3{font-size:11px}
  .sfbb .article-copy p{font-size:8.5px}
  .sfbb .quick-view{opacity:1;transform:none;width:31px;height:31px}
  .sfbb .newsletter-form{flex-direction:column}
  .sfbb .newsletter-form .btn{width:100%}
  .sfbb .academy-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px;scrollbar-width:none}
  .sfbb .academy-row::-webkit-scrollbar{display:none}
  .sfbb .course{flex:0 0 82%;scroll-snap-align:start}
  .sfbb .end-box{grid-template-columns:1fr}
  .sfbb-modal-hero{height:220px}
  .sfbb-modal-body{padding:21px}
  .sfbb-modal-body h2{font-size:27px}
  .sfbb-modal-grid{grid-template-columns:1fr}
  .sfbb-modal-actions .btn{width:100%}
}
@media(max-width:430px){
  .sfbb .article-grid{grid-template-columns:1fr 1fr}
  .sfbb .article-image{aspect-ratio:1/1}
}
/* Functional fixes; original client layout rules above remain unchanged. */
.sfbb *,.sfbb *::before,.sfbb *::after,.sfbb-modal *,.sfbb-modal *::before,.sfbb-modal *::after{box-sizing:border-box}
.sfbb [hidden],.sfbb-modal [hidden]{display:none!important}
.sfbb .story:focus-visible,.sfbb a:focus-visible,.sfbb button:focus-visible,.sfbb-modal button:focus-visible,.sfbb-modal a:focus-visible{outline:3px solid #8b5cff;outline-offset:4px}
.sfbb .feature-grid:has(.story:only-child){grid-template-columns:1fr}
.sfbb .feature-grid .story:only-child{grid-column:1;grid-row:1}
.sfbb .article-image.image-unavailable,.sfbb .course-image.image-unavailable{background:#eee9f4}
.sfbb-modal{--p:#6f3cff;--p2:#8b5cff;--g:#22c55e;--ink:#171329;--muted:#6f6a7d;--line:#e9e5f2;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.6}
.sfbb-modal-hero img{display:block;width:100%}
.sfbb-modal-body h2{line-height:1.08}
.sfbb-modal-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 18px;border-radius:12px;cursor:pointer;font-size:12px;font-weight:900;font-family:inherit;text-decoration:none}
.sfbb-modal-actions .btn-primary{border:0;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 12px 28px rgba(111,60,255,.22)}
.sfbb-modal-actions .btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}