/* =========================================================
   ABOUT HERO SECTION
========================================================= */
:root{
    --bg:#080807;
    --bg-soft:#11110f;
  
    --panel:rgba(20,20,18,.74);
  
    --line:rgba(255,255,255,.08);
  
    --text:#f5f1e9;
    --muted:#b9b0a2;
  
    --gold:#d9af52;
    --gold-bright:#ffe4a3;
  
    --shadow:
    0 20px 60px rgba(0,0,0,.42);
  }

.about-hero{
    position:relative;
  
    width:100%;
    min-height:88vh;
  
    overflow:hidden;
  
    display:flex;
    align-items:center;
  
    padding:170px 5% 120px;
  
    background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.60),
      rgba(0,0,0,0.70)
    ),
  
    url("/assets/bb-about-hero.png");
  
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  
  /* =========================================================
     OVERLAY
  ========================================================= */
  
  .about-overlay{
    position:absolute;
    inset:0;
  
    background:
    radial-gradient(
      circle at top left,
      rgba(212,161,74,0.16),
      transparent 28%
    ),
  
    radial-gradient(
      circle at bottom right,
      rgba(212,161,74,0.10),
      transparent 26%
    );
  
    z-index:1;
  }
  
  /* =========================================================
     GOLD GLOW
  ========================================================= */
  
  .about-glow{
    position:absolute;
  
    border-radius:50%;
  
    filter:blur(90px);
  
    opacity:.15;
  
    z-index:1;
  }
  
  .about-glow-1{
    top:100px;
    left:-120px;
  
    width:250px;
    height:250px;
  
    background:#d4a14a;
  }
  
  .about-glow-2{
    bottom:-90px;
    right:-90px;
  
    width:230px;
    height:230px;
  
    background:#b8832f;
  }
  
  /* =========================================================
     CONTAINER
  ========================================================= */
  
  .about-hero-container{
    position:relative;
    z-index:2;
  
    width:100%;
    max-width:2560px;
  
    margin:auto;
  
    display:grid;
    grid-template-columns:1.05fr .68fr;
    gap:58px;
  
    align-items:center;
  }
  
  /* =========================================================
     LEFT CONTENT
  ========================================================= */
  
  .about-mini-title{
    display:inline-flex;
    align-items:center;
    gap:12px;
  
    margin-bottom:25px;
  
    color:var(--gold-bright);
  
    font-size:.80rem;
    font-weight:800;
  
    text-transform:uppercase;
    letter-spacing:.18em;
  }
  
  
  .about-hero-content h1{
    margin:0 0 20px;
  
    max-width:660px;
  
    color:#f7f2ea;
  
    font-size:clamp(44px,5vw,74px);
    line-height:0.98;
    letter-spacing:-2px;
    font-weight:700;
  
    font-family:Georgia, serif;
  }
  
  .about-hero-content h1 span{
    color:#d6a24d;
  }
  
  .about-hero-content p{
    max-width:560px;
  
    color:rgba(255,255,255,0.72);
  
    font-size:15px;
    line-height:1.85;
    font-weight:400;
  
    margin-bottom:32px;
  }
  
  /* =========================================================
     BUTTONS
  ========================================================= */
  
  .about-hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }
  
  .about-btn-primary,
  .about-btn-secondary{
    height:56px;
  
    padding:0 32px;
  
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    border-radius:999px;
  
    font-size:1rem;
    font-weight:800;
    letter-spacing:.4px;
  
    text-decoration:none;

    overflow:hidden;
  
    transition:.35s ease;
  }
  
  .about-btn-primary{
    background:linear-gradient(
      135deg,
      #f0c77c,
      #b78633
    );
  
    color:#111;
  
    box-shadow:
    0 12px 34px rgba(212,161,74,.22);
  }
  
  .about-btn-primary:hover{
    transform:translateY(-3px);
  }
  
  .about-btn-secondary{
    border:1px solid rgba(255,255,255,0.14);
  
    background:rgba(255,255,255,0.04);
  
    backdrop-filter:blur(12px);
  
    color:#fff;
  }
  
  .about-btn-secondary:hover{
    border-color:rgba(212,161,74,0.4);
  
    background:rgba(212,161,74,0.08);
  }
  
  /* =========================================================
     RIGHT CARD
  ========================================================= */
  
  .about-hero-card{
    position:relative;
  
    padding:30px;
  
    border-radius:26px;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  
    border:1px solid rgba(255,255,255,0.08);
  
    backdrop-filter:blur(18px);
  
    box-shadow:
    0 20px 60px rgba(0,0,0,0.42);
  }
  
  .about-card-top{
    margin-bottom:16px;
  }
  
  .about-card-top span{
    color:#d6a24d;
  
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  
  .about-hero-card h3{
    margin:0 0 16px;
  
    color:#fff;
  
    font-size:36px;
    line-height:1.1;
    font-weight:700;
  
    font-family:Georgia, serif;
  }
  
  .about-hero-card p{
    color:rgba(255,255,255,0.70);
  
    font-size:14px;
    line-height:1.8;
  
    margin-bottom:28px;
  }
  
  /* =========================================================
     STATS
  ========================================================= */
  
  .about-card-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  
  .about-stat{
    padding-top:16px;
  
    border-top:1px solid rgba(255,255,255,0.08);
  }
  
  .about-stat h4{
    margin:0 0 6px;
  
    color:#f4c46f;
  
    font-size:24px;
    font-weight:700;
  }
  
  .about-stat span{
    color:rgba(255,255,255,0.62);
  
    font-size:11px;
    line-height:1.5;
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  
  @media(max-width:992px){
  
    .about-hero{
      min-height:auto;
  
      padding:150px 5% 110px;
    }
  
    .about-hero-container{
      grid-template-columns:1fr;
      gap:42px;
    }
  
    .about-hero-content h1{
      font-size:58px;
    }
  
  }
  
  @media(max-width:768px){
  
    .about-hero{
      padding:130px 6% 100px;
    }
  
    .about-mini-title{
      font-size:12px;
    }
  
    .about-hero-content h1{
      font-size:44px;
  
      line-height:1;
    }
  
    .about-hero-content p{
      font-size:14px;
      line-height:1.8;
    }
  
    .about-hero-card{
      padding:26px;
    }
  
    .about-hero-card h3{
      font-size:30px;
    }
  
    .about-card-stats{
      grid-template-columns:1fr;
    }
  
  }
  
  @media(max-width:480px){
  
    .about-hero-content h1{
      font-size:38px;
    }
  
    .about-hero-buttons{
      flex-direction:column;
    }
  
    .about-btn-primary,
    .about-btn-secondary{
      width:100%;
    }
  
  }

  /* =========================================================
   SHARED
========================================================= */

.about-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
  
    margin-bottom:25px;
  
    color:var(--gold-bright);
  
    font-size:1rem;
    font-weight:800;
  
    text-transform:uppercase;
    letter-spacing:.18em;
  }
  
  /* =========================================================
     THE IDEA SECTION
  ========================================================= */
  
  .about-idea-section{
    position:relative;
  
    overflow:hidden;
  
    padding:105px 5%;
  
    background:#070707;
  
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  
  .about-idea-container{
    position:relative;
    z-index:2;
  
    max-width:2560px;
  
    margin:auto;
  
    display:grid;
    grid-template-columns:1fr .95fr;
    gap:70px;
  
    align-items:center;
  }
  
  .about-idea-content h2{
    margin:0 0 22px;
  
    max-width:620px;
  
    color:#f5f1ea;
  
    font-size:clamp(34px,4vw,56px);
    line-height:1.02;
    letter-spacing:-1.5px;
  
    font-family:Georgia, serif;
  }
  
  .about-idea-content p{
    max-width:580px;
  
    margin-bottom:22px;
  
    color:rgba(255,255,255,0.70);
  
    font-size:15px;
    line-height:1.9;
  }
  
  .about-idea-visual{
    position:relative;
  }
  
  .about-idea-visual img{
    width:100%;
    height:560px;
  
    object-fit:cover;
  
    border-radius:28px;
  
    border:1px solid rgba(255,255,255,0.08);
  }
  
  .about-floating-card{
    position:absolute;
  
    left:-40px;
    bottom:40px;
  
    width:290px;
  
    padding:28px;
  
    border-radius:24px;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  
    border:1px solid rgba(255,255,255,0.08);
  
    backdrop-filter:blur(18px);
  }
  
  .about-floating-card span{
    display:block;
  
    margin-bottom:14px;
  
    color:#d6a24d;

    font-weight: 800;
  
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  
  .about-floating-card h3{
    margin:0;
  
    color:#fff;
  
    font-size:24px;
    line-height:1.35;
  
    font-family:Georgia, serif;
  }
  
  .about-idea-glow{
    position:absolute;
  
    border-radius:50%;
  
    filter:blur(90px);
  
    opacity:.12;
  }
  
  .about-idea-glow-1{
    top:0;
    left:-100px;
  
    width:240px;
    height:240px;
  
    background:#d4a14a;
  }
  
  .about-idea-glow-2{
    bottom:-100px;
    right:-100px;
  
    width:260px;
    height:260px;
  
    background:#a56f25;
  }
  
  
/* =========================================================
   THE ECOSYSTEM SECTION
========================================================= */

.ecosystem-section{
    position:relative;
  
    overflow:hidden;
  
    padding:95px 5%;
  
    background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.54),
      rgba(0,0,0,0.64)
    ),
  
    url("/assets/bb-conecpt.png");
  
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  
    border-top:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  
  /* =========================================================
     OVERLAY
  ========================================================= */
  
  .ecosystem-overlay{
    position:absolute;
    inset:0;
  
    background:
    radial-gradient(
      circle at top left,
      rgba(212,161,74,0.12),
      transparent 28%
    ),
  
    radial-gradient(
      circle at bottom right,
      rgba(212,161,74,0.08),
      transparent 30%
    );
  
    z-index:1;
  }
  
  /* =========================================================
     GLOW
  ========================================================= */
  
  .ecosystem-glow{
    position:absolute;
  
    border-radius:50%;
  
    filter:blur(100px);
  
    opacity:.12;
  
    z-index:1;
  }
  
  .ecosystem-glow-1{
    top:-100px;
    left:-120px;
  
    width:280px;
    height:280px;
  
    background:#d4a14a;
  }
  
  .ecosystem-glow-2{
    bottom:-120px;
    right:-120px;
  
    width:260px;
    height:260px;
  
    background:#b98534;
  }
  
  /* =========================================================
     CONTAINER
  ========================================================= */
  
  .ecosystem-container{
    position:relative;
    z-index:2;
  
    max-width:2560px;
    margin:auto;
  }
  
  /* =========================================================
     HEADING
  ========================================================= */
  
  .ecosystem-heading{
    max-width:720px;
  
    margin:0 auto 58px;
  
    text-align:center;
  }
  
  .ecosystem-heading h2{
    margin:0 0 16px;
  
    color:#f5f1ea;
  
    font-size:clamp(30px,4vw,48px);
    line-height:1.1;
    letter-spacing:-1px;
  
    font-family:Georgia, serif;
  }
  
  .ecosystem-heading p{
    max-width:620px;
  
    margin:auto;
  
    color:rgba(255,255,255,0.70);
  
    font-size:15px;
    line-height:1.8;
  }
  
  /* =========================================================
     GRID
  ========================================================= */
  
  .ecosystem-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  
  /* =========================================================
     CARD
  ========================================================= */
  
  .ecosystem-card{
    position:relative;
  
    overflow:hidden;
  
    padding:30px 26px;
  
    border-radius:26px;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.03)
    );
  
    border:1px solid rgba(255,255,255,0.08);
  
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
  
    box-shadow:
    0 12px 34px rgba(0,0,0,0.34);
  
    transition:
    transform .45s ease,
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease;
  }
  
  /* =========================================================
     GOLD TOP LINE
  ========================================================= */
  
  .ecosystem-card::before{
    content:"";
  
    position:absolute;
  
    top:0;
    left:0;
  
    width:100%;
    height:1px;
  
    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,161,74,0.85),
      transparent
    );
  
    opacity:.58;
  }
  
  /* =========================================================
     GOLD SHIMMER
  ========================================================= */
  
  .ecosystem-card::after{
    content:"";
  
    position:absolute;
  
    top:-120%;
    left:-40%;
  
    width:150px;
    height:240px;
  
    background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,0.04),
      transparent
    );
  
    transform:rotate(24deg);
  
    transition:.8s ease;
  
    opacity:0;
  }
  
  .ecosystem-card:hover::after{
    top:120%;
  
    opacity:1;
  }
  
  /* =========================================================
     HOVER
  ========================================================= */
  
  .ecosystem-card:hover{
    transform:
    translateY(-8px)
    scale(1.01);
  
    border-color:rgba(212,161,74,0.22);
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.04)
    );
  
    box-shadow:
    0 22px 55px rgba(0,0,0,0.46);
  }
  
  /* =========================================================
     ICON
  ========================================================= */
  
  .ecosystem-icon{
    width:58px;
    height:58px;
  
    margin-bottom:22px;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    border-radius:18px;
  
    background:
    linear-gradient(
      135deg,
      rgba(212,161,74,0.18),
      rgba(212,161,74,0.05)
    );
  
    border:1px solid rgba(212,161,74,0.14);
  
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 20px rgba(0,0,0,0.20);
  
    transition:.4s ease;
  }
  
  .ecosystem-card:hover .ecosystem-icon{
    transform:
    translateY(-3px)
    rotate(-4deg);
  
    border-color:rgba(212,161,74,0.30);
  
    background:
    linear-gradient(
      135deg,
      rgba(212,161,74,0.24),
      rgba(212,161,74,0.08)
    );
  }
  
  .ecosystem-icon i{
    color:#e3b35d;
  
    font-size:24px;
  }
  
  /* =========================================================
     TYPOGRAPHY
  ========================================================= */
  
  .ecosystem-card h3{
    margin:0 0 10px;
  
    color:#fff;
  
    font-size:20px;
    line-height:1.2;
    font-weight:700;
  
    font-family:Georgia, serif;
  }
  
  .ecosystem-card p{
    color:rgba(255,255,255,0.66);
  
    font-size:13px;
    line-height:1.75;
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  
  @media(max-width:992px){
  
    .ecosystem-grid{
      grid-template-columns:1fr 1fr;
    }
  
  }
  
  @media(max-width:768px){
  
    .ecosystem-section{
      padding:80px 6%;
    }
  
    .ecosystem-heading{
      margin-bottom:48px;
    }
  
    .ecosystem-heading h2{
      font-size:38px;
    }
  
    .ecosystem-heading p{
      font-size:13px;
    }
  
    .ecosystem-grid{
      grid-template-columns:1fr;
      gap:18px;
    }
  
    .ecosystem-card{
      padding:28px 24px;
    }
  
  }
  
  @media(max-width:480px){
  
    .ecosystem-heading h2{
      font-size:32px;
    }
  
    .ecosystem-card h3{
      font-size:18px;
    }
  
    .ecosystem-card p{
      font-size:12.5px;
    }
  
  }
  
  
  /* =========================================================
     PLATFORM VISION
  ========================================================= */
  
  .platform-vision-section{
    position:relative;
  
    overflow:hidden;
  
    padding:120px 5%;
  
    background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.62),
      rgba(0,0,0,0.72)
    ),
  
    url("/assets/bb-cta.png");
  
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  
  .platform-vision-overlay{
    position:absolute;
    inset:0;
  
    background:
    radial-gradient(
      circle at top left,
      rgba(212,161,74,0.16),
      transparent 30%
    );
  }
  
  .platform-vision-container{
    position:relative;
    z-index:2;
  
    max-width:2560px;
  
    margin:auto;
  
    text-align:center;
  }
  
  .platform-vision-container h2{
    margin:0 0 22px;
  
    color:#f7f2ea;
  
    font-size:clamp(38px,4vw,64px);
    line-height:1.02;
  
    font-family:Georgia, serif;
  }
  
  .platform-vision-container p{
    max-width:760px;
  
    margin:0 auto 50px;
  
    color:rgba(255,255,255,0.74);
  
    font-size:15px;
    line-height:1.9;
  }
  
  .platform-vision-points{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  
  .platform-vision-points div{
    padding:28px;
  
    border-radius:24px;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  
    border:1px solid rgba(255,255,255,0.08);
  
    backdrop-filter:blur(16px);

    transition: 0.35s ease;
  }

  .platform-vision-points div:hover{
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.04)
    );
  
    border-color:rgba(212,161,74,0.22);
  
    box-shadow:
    0 12px 34px rgba(0,0,0,0.34);
  
    transform:translateY(-6px);
  
    transition:
    transform .45s ease,
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease;
  }
  
  .platform-vision-points strong{
    display:block;
  
    margin-bottom:14px;
  
    color:#fff;
  
    font-size:18px;
  
    font-family:Georgia, serif;
  }
  
  .platform-vision-points span{
    color:rgba(255,255,255,0.66);
  
    font-size:13px;
    line-height:1.8;
  }
  
  
/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){

    .about-idea-container{
      grid-template-columns:1fr;
    }
  
    .platform-vision-points{
      grid-template-columns:1fr;
    }
  
  }
  
  @media(max-width:768px){
  
    .about-idea-section,
    .platform-vision-section{
      padding:85px 6%;
    }
  
    .about-idea-content h2,
    .platform-vision-container h2{
      font-size:40px;
    }
  
    .about-floating-card{
      position:relative;
  
      left:auto;
      bottom:auto;
  
      width:100%;
  
      margin-top:18px;
    }
  
  }