!doctype html
html lang=en
head
  meta charset=utf-8 
  meta name=viewport content=width=device-width,initial-scale=1 
  titleBBN Unfilteredtitle
  meta name=description content=BBN Unfiltered — Where KY Fans Tell It Like It Is. 
  style
    root{
      --bg#0b0f1a;
      --card#101a2a;
      --text#e9f0ff;
      --muted#b8c4dd;
      --accent#2d6cff;
      --accent2#00d2ff;
      --borderrgba(255,255,255,.08);
      --shadow 0 10px 30px rgba(0,0,0,.35);
      --radius18px;
      --max1100px;
      --font ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }
    {box-sizingborder-box}
    body{
      margin0;
      font-familyvar(--font);
      colorvar(--text);
      background
        radial-gradient(1200px 600px at 15% 0%, rgba(45,108,255,.30), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(0,210,255,.18), transparent 55%),
        linear-gradient(180deg, #05070c, var(--bg));
      min-height100vh;
    }
    a{colorinherit;text-decorationnone}
    .wrap{max-widthvar(--max); margin0 auto; padding28px 18px 60px}
    .nav{
      displayflex; align-itemscenter; justify-contentspace-between;
      gap16px; padding14px 18px;
      border1px solid var(--border); border-radius999px;
      backgroundrgba(16,26,42,.55); backdrop-filter blur(10px);
      box-shadow var(--shadow);
      positionsticky; top14px; z-index10;
    }
    .brand{displayflex; align-itemscenter; gap12px; font-weight800; letter-spacing.2px}
    .dot{
      width12px;height12px;border-radius999px;
      backgroundlinear-gradient(135deg,var(--accent),var(--accent2));
      box-shadow0 0 18px rgba(45,108,255,.6);
    }
    .links{displayflex; gap14px; colorvar(--muted); font-weight600}
    .links a{padding8px 10px; border-radius999px}
    .links ahover{backgroundrgba(255,255,255,.06); colorvar(--text)}
    .cta{
      displayflex; gap10px; align-itemscenter; flex-wrapwrap;
    }
    .btn{
      displayinline-flex; align-itemscenter; justify-contentcenter;
      padding10px 14px; border-radius999px; font-weight800;
      border1px solid var(--border);
      backgroundrgba(255,255,255,.06);
    }
    .btn.primary{
      bordernone;
      backgroundlinear-gradient(135deg,var(--accent),var(--accent2));
      color#071022;
      box-shadow0 10px 30px rgba(45,108,255,.25);
    }
    .hero{displaygrid; grid-template-columns 1.1fr .9fr; gap22px; align-itemsstretch; margin-top22px}
    .card{
      border1px solid var(--border);
      backgroundrgba(16,26,42,.55);
      backdrop-filter blur(10px);
      border-radiusvar(--radius);
      box-shadow var(--shadow);
      overflowhidden;
    }
    .heroLeft{padding26px}
    h1{margin0 0 10px; font-size44px; line-height1.05}
    .tag{colorvar(--muted); font-size17px; line-height1.5; margin0 0 18px}
    .pillRow{displayflex; gap10px; flex-wrapwrap; margin18px 0 22px}
    .pill{
      font-weight800; font-size12px; letter-spacing.6px; text-transformuppercase;
      padding8px 10px; border-radius999px;
      border1px solid var(--border);
      backgroundrgba(255,255,255,.05);
      colorvar(--muted);
    }
    .heroRight{displayflex; flex-directioncolumn}
    .imgBox{
      height100%;
      min-height280px;
      background
        linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45)),
        url(hero.jpg) centercover no-repeat;
      displayflex; align-itemsflex-end; padding20px;
    }
    .imgCaption{
      width100%;
      border1px solid var(--border);
      backgroundrgba(8,12,20,.55);
      backdrop-filter blur(10px);
      border-radius14px;
      padding14px;
    }
    .imgCaption strong{displayblock}
    .grid2{displaygrid; grid-template-columns 1fr 1fr; gap18px; margin-top18px}
    .section{padding22px}
    .section h2{margin0 0 8px; font-size22px}
    .muted{colorvar(--muted); line-height1.6}
    .embed{
      border-radius14px;
      border1px solid var(--border);
      backgroundrgba(0,0,0,.25);
      overflowhidden;
    }
    iframe{width100%; height180px; border0}
    .social{displayflex; gap10px; flex-wrapwrap; margin-top12px}
    .social a{padding10px 12px; border-radius999px; border1px solid var(--border); backgroundrgba(255,255,255,.05); font-weight800}
    .social ahover{backgroundrgba(255,255,255,.08)}
    .signup{
      displayflex; gap10px; flex-wrapwrap; margin-top12px
    }
    input{
      flex1;
      min-width220px;
      padding12px 14px;
      border-radius12px;
      border1px solid var(--border);
      backgroundrgba(255,255,255,.05);
      colorvar(--text);
      outlinenone;
    }
    inputplaceholder{colorrgba(184,196,221,.75)}
    footer{
      margin-top22px;
      padding18px;
      colorvar(--muted);
      text-aligncenter;
      border-top1px solid var(--border);
    }
    @media (max-width 880px){
      .hero{grid-template-columns1fr}
      h1{font-size38px}
      iframe{height210px}
    }
  style
head
body
  div class=wrap
    div class=nav
      div class=brandspan class=dotspan BBN Unfiltereddiv
      div class=links
        a href=#listenListena
        a href=#aboutAbouta
        a href=#followFollowa
      div
      div class=cta
        a class=btn href=#followSubscribea
        a class=btn primary href=#listenPlay Latesta
      div
    div

    div class=hero
      div class=card heroLeft
        div class=pillRow
          span class=pillKentucky Sportsspan
          span class=pillNo Filterspan
          span class=pillWeekly Dropsspan
        div
        h1Where KY Fans Tell It Like It Is.h1
        p class=tag
          Bold takes, real reactions, and the kind of energy you only get from Big Blue Nation.
          Tap in for episodes, clips, and updates.
        p
        div class=cta
          a class=btn primary href=#listen▶ Listen Nowa
          a class=btn href=#followFollow the Showa
          a class=btn href=mailtohello@bbnunfiltered.comContacta
        div
        p class=muted style=margin-top14px;font-size13px;
          Tip replace stronghero.jpgstrong with your cover image (same folder as this file).
        p
      div

      div class=card heroRight
        div class=imgBox
          div class=imgCaption
            strongNew Episodestrong
            span class=mutedAdd your latest episode title here.span
          div
        div
      div
    div

    div class=grid2
      section id=listen class=card section
        h2Latest Episodeh2
        p class=mutedPaste your SpotifyAppleYouTube embed below.p
        div class=embed style=margin-top12px;
          !-- Replace this iframe with your real podcast embed --
          iframe src=aboutblank title=Podcast playeriframe
        div
      section

      section id=about class=card section
        h2Abouth2
        p class=muted
          BBN Unfiltered is the home for Kentucky fans who want the truth — not the sugarcoat.
          Hosted by strongYOUstrong. Powered by passion. Delivered with zero filter.
        p
        div class=pillRow style=margin-top14px;
          span class=pillGame Recapsspan
          span class=pillRecruitingspan
          span class=pillLive Reactionsspan
        div
      section
    div

    section id=follow class=card section style=margin-top18px;
      h2Follow & Subscribeh2
      p class=mutedUpdate these links with your real profiles.p

      div class=social
        a href=# aria-label=FacebookFacebooka
        a href=# aria-label=XXa
        a href=# aria-label=InstagramInstagrama
        a href=# aria-label=YouTubeYouTubea
        a href=# aria-label=TikTokTikToka
      div

      div style=margin-top18px;
        h3 style=margin0 0 8px;font-size16px;Get episode dropsh3
        div class=signup
          input type=email placeholder=your@email.com 
          a class=btn primary href=# onclick=alert('Hook this up to MailchimpConvertKit later!')Joina
        div
        p class=muted style=font-size12px;margin-top10px;
          Want this wired to Mailchimp or ConvertKit I can add it.
        p
      div
    section

    footer
      © span id=yearspan BBN Unfiltered • Built for Big Blue Nation
    footer
  div

  script
    document.getElementById(year).textContent = new Date().getFullYear();
  script
body
html