/* ══════════════════════════════════════════
       CSS DESIGN TOKENS — mirrors index.css
    ══════════════════════════════════════════ */
    :root {
      /* HSL colour tokens */
      --bg:             30 10% 8%;
      --fg:             40 30% 90%;
      --card:           30  8% 12%;
      --muted:          30  8% 18%;
      --muted-fg:       40 15% 55%;
      --border:         40 20% 20%;
      --gold:           40 85% 55%;
      --gold-light:     42 90% 65%;
      --gold-dark:      38 80% 40%;
      --dark-surface:   30 10% 10%;
      --darker-surface: 30 10%  6%;
      --secondary:     220 60% 45%;

      /* Resolved colours */
      --c-bg:          hsl(30,10%, 8%);
      --c-fg:          hsl(40,30%,90%);
      --c-muted-fg:    hsl(40,15%,55%);
      --c-border:      hsl(40,20%,20%);
      --c-gold:        hsl(40,85%,55%);
      --c-gold-light:  hsl(42,90%,65%);
      --c-gold-dark:   hsl(38,80%,40%);
      --c-dark-surface:hsl(30,10%,10%);
      --c-darker:      hsl(30,10%, 6%);
      --c-muted-bg:    hsl(30, 8%,18%);
      --c-secondary:   hsl(220,60%,45%);

      /* Typography */
      --font-heading: 'Bebas Neue', sans-serif;
      --font-script:  'Caveat', cursive;
      --font-body:    'Open Sans', sans-serif;

      --radius: 0.5rem;
    }

    /* ══════════════════════════════════════════
       RESET
    ══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    section {scroll-margin-top:100px;}
    body {
      font-family: var(--font-body);
      background: var(--c-bg);
      color: var(--c-fg);
      overflow-x: hidden;
    }
    a { text-decoration: none; }
    img { display: block; }
    button { cursor: pointer; font-family: var(--font-body); }

    /* ══════════════════════════════════════════
       UTILITY CLASSES (mirrors @layer components)
    ══════════════════════════════════════════ */

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      letter-spacing: 0.02em;
    }

    .logo{
        width: 80px;
    }

    /* Gold gradient text */
    .gold-gradient-text {
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .gold-text { color: var(--c-gold); }

    /* Section heading */
    .section-heading {
      font-family: var(--font-heading);
      color: var(--c-gold);
      text-transform: uppercase;
    }

    /* Script font */
    .script-text { font-family: var(--font-script); }

    /* Gold divider */
    .gold-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, hsl(40 85% 55% / .5), transparent);
    }

    /* Buttons */
    .btn-gold {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.75rem 2rem;
      border-radius: 9999px;
      background: var(--c-gold);
      color: var(--c-darker);
      font-family: var(--font-body);
      font-weight: 600; font-size: .875rem; letter-spacing: .05em;
      transition: background .3s, transform .3s, box-shadow .3s;
      border: none;
      white-space: nowrap;
    }
    .btn-gold:hover {
      background: var(--c-gold-light);
      transform: translateY(-1px);
      box-shadow: 0 4px 20px hsl(40 85% 55% / .3);
    }
    .btn-outline-gold {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.75rem 2rem;
      border-radius: 9999px;
      border: 1.5px solid var(--c-gold);
      color: var(--c-gold);
      background: transparent;
      font-family: var(--font-body);
      font-weight: 600; font-size: .875rem; letter-spacing: .05em;
      transition: background .3s, transform .3s;
    }
    .btn-outline-gold:hover {
      background: hsl(40 85% 55% / .1);
      transform: translateY(-1px);
    }
    .btn-blue {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.75rem 2rem;
      border-radius: 9999px;
      background: var(--c-secondary);
      color: #fff;
      font-family: var(--font-body);
      font-weight: 600; font-size: .875rem; letter-spacing: .05em;
      transition: background .3s, transform .3s, box-shadow .3s;
      border: none;
    }
    .btn-blue:hover {
      background: hsl(220 60% 50%);
      transform: translateY(-1px);
      box-shadow: 0 4px 20px hsl(220 60% 45% / .3);
    }

    /* Texture section bg helper */
    .texture-section {
      position: relative;
      background-size: cover;
      background-position: center;
    }
    .texture-section > .overlay {
      position: absolute; inset: 0;
      pointer-events: none;
    }
    .texture-section > .inner {
      position: relative; z-index: 10;
    }

    /* Container */
    /* .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 3rem;
    }
    @media (max-width: 768px) {
      .container { padding: 0 1.5rem; }
    } */

    /* ══════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════ */
    .navbar {
      position: absolute; top: 0; 
      left: 0; right: 0; 
      z-index: 50;
      display: flex;
      align-items: center; justify-content: space-between;
      padding: 1.25rem 3rem;
    }
    .nav-logo {
      display: flex; flex-direction: column;
      font-family: var(--font-heading);
      font-size: 1.75rem; line-height: 1;
      letter-spacing: .1em;
    }
    .nav-logo .logo-top {
      display: block; line-height: .85;
    }
    .nav-logo .logo-script {
      display: block; line-height: .85;
      font-family: var(--font-script);
      font-size: 2rem;
      font-style: italic;
    }
    .nav-links {
      display: flex; align-items: center; gap: 2rem;
      list-style: none;
    }
    .nav-links a {
      color: var(--c-fg);
      font-size: .875rem; font-weight: 600; letter-spacing: .05em;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--c-gold); }
    .nav-socials {
      display: flex; align-items: center; gap: 1rem;
    }
    .nav-socials a {
      color: var(--c-fg);
      transition: color .2s;
      display: flex; align-items: center;
    }
    .nav-socials a:hover { color: var(--c-gold); }
    .nav-socials svg { width: 1.25rem; height: 1.25rem; }

    /* ══════════════════════════════════════════
       HERO SECTION
    ══════════════════════════════════════════ */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex; align-items: center;
      background-image: url("../images/M1_2.png");
      background-size: cover;
      background-position: center top;
      overflow: hidden;
    }
    /* left-to-right dark gradient overlay so text is readable */
    .hero-overlay {
      position: absolute; inset: 0;
      /* background: linear-gradient(
        105deg,
        hsl(30 10% 6% / .97) 0%,
        hsl(30 10% 6% / .88) 35%,
        hsl(30 10% 6% / .45) 60%,
        transparent 100%
      ); */
    }

    .hero-inner {
      position: relative; z-index: 10;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 0;
      padding-top: 5rem;     /* offset navbar */
    }

    /* ── Hero left text ── */
    .hero-text {
      padding: 5rem 3rem 5rem;
    }
    .hero-label {
      font-family: var(--font-heading);
      font-size: 1.1rem; letter-spacing: .15em;
      color: var(--c-muted-fg);
      text-transform: uppercase;
      margin-bottom: .5rem;
    }
    .hero-h1 {
      font-family: var(--font-heading);
      text-transform: uppercase;
      line-height: .9;
      margin-bottom: 1.25rem;
    }
    .hero-h1 .row-welcome {
      display: block;
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      color: var(--c-fg);
      letter-spacing: .12em;
    }
    .hero-h1 .row-grownup {
      display: block;
      font-size: clamp(4rem, 7vw, 6rem);
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: .05em;
      line-height: .95;
    }
    .hero-h1 .row-shit {
      display: block;
      font-family: var(--font-script);
      font-size: clamp(4rem, 7vw, 6.5rem);
      font-style: italic;
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: .95;
    }
    .hero-subtitle {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: bold;
      letter-spacing: .15em;
      color: var(--c-muted-fg);
      text-transform: uppercase;
      margin-bottom: .75rem;
    }
    .hero-desc {
      color: var(--c-fg);
      font-size: .9rem; line-height: 1.75;
      max-width: 420px;
      margin-bottom: 2rem;
    }
    .hero-btns {
      display: flex; gap: 1rem; flex-wrap: wrap;
    }

    /* ── Hero right image ── */
    .hero-image {
      position: relative;
      display: flex; align-items: flex-end; justify-content: flex-end;
      height: 100vh;
      overflow: visible;
    }
    .hero-image img {
      position: absolute;
      bottom: 0; right: 0;
      width: 100%; max-width: 780px;
      height: 100%;
      object-fit: contain;
      object-position: bottom right;
      filter: drop-shadow(0 20px 60px rgba(0,0,0,.8));
    }

    /* ══════════════════════════════════════════
       STATS BAR
    ══════════════════════════════════════════ */
    .stats-bar {
      position: relative;
      background-image: url("../images/M2_2.png");
      background-size: cover; background-position: center;
    }
    .stats-bar-overlay { background: hsl(30 10% 8% / .80); }
    .stats-bar-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.25rem 3rem;
    }
    .stat-item {
      display: flex; align-items: center; gap: .5rem;
    }
    .stat-num {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 2.5vw, 1.875rem);
      line-height: 1;
      color: var(--c-muted-fg);
      font-weight: 800;
    }
    .stat-label {
       background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 21px; 
      font-weight: 800;
    }
    .platform-group {
      display: flex; align-items: center; gap: 1.5rem;
    }
    .platform-item {
      display: flex; align-items: center; gap: .5rem;
      color: var(--c-muted-fg); font-size: 22px; font-weight: 700;
    }
    .platform-item svg { width: 1.250rem; height: 1.25rem; flex-shrink: 0; }

    /* ══════════════════════════════════════════
       EPISODES SECTION
    ══════════════════════════════════════════ */
    .episodes-section {
      background-image: url("../images/M3_2.png");
      padding: 5rem 0;
    }
    .episodes-section .overlay { background: hsl(30 10% 8% / .85); }

    .episodes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
    @media (max-width: 1024px) {
      .episodes-grid { grid-template-columns: 1fr; }
    }

    /* section heading row */
    .sec-hdr {
      display: flex; align-items: center; justify-content: space-between;
      /* margin-bottom: 1.5rem; */
    }
    .sec-title {
      font-family: var(--font-heading);
      color: var(--c-gold);
      text-transform: uppercase;
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1;
    }

    /* Latest episode thumb */
    .ep-thumb {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
    }
    .ep-thumb-img {
      width: 100%; aspect-ratio: 16/9;
      object-fit: cover; display: block;
    }
    
    .ep-logo-img img {
        width: 14% !important;
    }

    .ep-thumb-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      /* background: hsl(30 10% 8% / .30); */
      /* transition: background .2s; */
    }
    .ep-thumb:hover .ep-thumb-overlay { background: hsl(30 10% 8% / .45); }
    .play-btn {
      width: 4rem; height: 4rem;
      border-radius: 50%;
      background: hsl(40 30% 90% / .20);
      backdrop-filter: blur(4px);
      border: 1px solid hsl(40 30% 90% / .30);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .play-btn svg { width: 1.75rem; height: 1.75rem; fill: var(--c-fg); margin-left: 3px; }
    /* .ep-listen-badge {
      position: absolute; bottom: 1rem; left: 1rem;
    } */
    .ep-listen-label {
      color: var(--c-fg); font-size: .75rem; line-height: 1.4;
      margin-bottom: .5rem;
    }
    .ep-platforms {
      display: flex; align-items: center; gap: .75rem;
    }

    .ep-latest-title {
      color: var(--c-muted-fg); font-size: .875rem;
      margin-top: .5rem;
    }

    /* Popular episode list */
    .pop-list { display: flex; flex-direction: column; gap: 1rem; }
    .pop-item {
      display: flex; align-items: center; gap: 1rem;
      border-radius: var(--radius);
      padding: .5rem;
      cursor: pointer;
      transition: background .2s;
    }
    .pop-item:hover { background: hsl(30 8% 18% / .3); }
    .pop-thumb {
      width: 7rem; height: 5rem;
      border-radius: var(--radius);
      object-fit: cover; flex-shrink: 0;
      background: var(--c-dark-surface);
    }
    .pop-info { min-width: 0; flex: 1; }
    .pop-title {
      color: var(--c-fg); font-weight: 600;
      font-size: .875rem; line-height: 1.3;
      transition: color .2s;
    }
    .pop-item:hover .pop-title { color: var(--c-gold); }
    .pop-meta { color: var(--c-muted-fg); font-size: .75rem; margin-top: .25rem; }

    /* ══════════════════════════════════════════
       WHY SECTION
    ══════════════════════════════════════════ */
    .why-section {
      background-image: url("../images/M4_2.png");
      padding: 5rem 0;
    }
    .why-section .overlay { background: hsl(30 10% 8% / .85); }

    .why-top {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 2.5rem; margin-bottom: 4rem;
    }
    @media (max-width: 1024px) { .why-top { grid-template-columns: 1fr; } }

    .why-h {
      font-family: var(--font-heading);
      color: var(--c-gold);
      text-transform: uppercase;
      font-size: clamp(3rem, 5vw, 4.5rem);
      line-height: .9;
    }
    .why-right p {
      color: var(--c-fg);
      font-size: .9rem; line-height: 1.75;
      margin-bottom: 1.5rem;
    }
    .why-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

    /* Category icons grid */
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.5rem;
    }
    @media (max-width: 768px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

    .cat-card img {
      width: 120px;
    }
    /* ══════════════════════════════════════════
       HOST SECTION
    ══════════════════════════════════════════ */
    .host-section {
      background-image: url("../images/M5_2.png");
      padding: 5rem 0;
      overflow: hidden;
    }
    .host-section .overlay { background: hsl(30 10% 8% / .80); }

    .host-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 2.5rem; align-items: center;
    }
    @media (max-width: 1024px) { .host-grid { grid-template-columns: 1fr; } }

    .host-img-wrap img {
      width: 100%; border-radius: 1rem;
      /* object-fit: cover;  */
      /* aspect-ratio: 3/4; */
    }
    .host-img-caption {
      position: absolute; bottom: 1.5rem; left: 1.5rem;
    }
    .host-img-caption .host-label {
      color: hsl(40 30% 90% / .6);
      font-size: .75rem; font-style: italic;
      margin-bottom: .25rem;
    }
    .host-img-caption h3 {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 4vw, 3.75rem);
      line-height: .85;
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Right content */
    .host-right .host-avatar-row {
      display: flex; align-items: flex-start; gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .host-avatar {
      width: 5rem; height: 5rem;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--c-gold);
      flex-shrink: 0;
    }
    .host-avatar-info p {
      color: var(--c-muted-fg); font-size: .875rem; margin-bottom: .25rem;
    }
    .host-avatar-info h2 {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 3vw, 3rem);
      color: var(--c-gold);
      line-height: .9;
    }
    .host-right > p {
      color: var(--c-fg);
      font-size: .9rem; line-height: 1.75;
      margin-bottom: 2rem;
    }
    .host-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

    /* ══════════════════════════════════════════
       NEWSLETTER SECTION
    ══════════════════════════════════════════ */
    .newsletter-section {
      background-image: url("../images/M6_2.png");
      padding: 5rem 0;
    }
    .newsletter-section .overlay { background: hsl(30 10% 8% / .85); }
    .newsletter-inner { text-align: center; }
    .newsletter-inner h2 {
      font-family: var(--font-heading);
      color: var(--c-gold);
      text-transform: uppercase;
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: .75rem;
    }
    .newsletter-inner p {
      color: var(--c-muted-fg); font-size: .875rem;
      margin-bottom: 2rem;
    }
    .newsletter-form {
      display: flex; gap: .75rem;
      max-width: 32rem; margin: 0 auto;
      flex-wrap: wrap; justify-content: center;
    }
    .newsletter-form input {
      flex: 1; min-width: 200px;
      padding: .75rem 1.25rem;
      border-radius: 9999px;
      background: var(--c-muted-bg);
      border: 1px solid var(--c-border);
      color: var(--c-fg);
      font-family: var(--font-body);
      font-size: .875rem;
      outline: none;
      transition: border-color .2s;
    }
    .newsletter-form input::placeholder { color: var(--c-muted-fg); }
    .newsletter-form input:focus { border-color: var(--c-gold); }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    .footer {
      padding: 3rem 0 2rem;
      background-color: #000;
    }
    .footer .overlay { background: hsl(30 10% 8% / .90); }

    .footer-top {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 2.5rem; margin-bottom: 2.5rem;
    }
    @media (max-width: 768px) { .footer-top { grid-template-columns: 1fr; } }
    @media (max-width: 768px){
        .footer-brand{
        text-align:center;
        }

        .footer-brand img{
        display:block;
        margin-left:auto;
        margin-right:auto;
        }
    }

    /* Brand column */
    .footer-logo {
      font-family: var(--font-heading);
      font-size: 1.5rem; letter-spacing: .1em;
      background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1; margin-bottom: 1rem;
    }
    .footer-logo .f-logo-top   { display: block; line-height: .85; }
    .footer-logo .f-logo-script {
      display: block; line-height: .85;
      font-family: var(--font-script);
      font-size: 1.875rem; font-style: italic;
    }
    .footer-tagline {
      font-family: var(--font-heading);
      font-size: 2.125rem; letter-spacing: .1em;
      font-weight: 800;
      color: var(--c-muted-fg); 
      margin-bottom: .75rem; line-height: 1.3;
    }
    .footer-desc {
      color: var(--c-fg); font-size: .75rem; line-height: 1.7;
      /* max-width: 18rem; */
    }

    /* Nav columns */
    .footer-col h4 {
      font-family: var(--font-heading);
      font-size: 50px; letter-spacing: .1em;
      color: var(--c-muted-fg); text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; padding-left: 0px;}
    .footer-col ul a {
      color: var(--c-fg); font-size: .875rem;
      transition: color .2s;
    }
    .footer-col ul a:hover { color: var(--c-gold); }

    /* Bottom bar */
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;
      padding-top: 1.5rem;
    }
    .footer-socials { display: flex; align-items: center; gap: 1rem; }
    .footer-socials a { color: var(--c-fg); transition: color .2s; display: flex; }
    .footer-socials a:hover { color: var(--c-gold); }
    .footer-socials svg { width: 1rem; height: 1rem; fill: currentColor; }
    .footer-legal { display: flex; align-items: center; gap: 1.5rem; }
    .footer-legal a {
    font-size: .75rem; transition: color .2s;
    }
    .footer-legal a:hover { color: var(--c-gold); }
    .footer-copy { font-size: .75rem; }




    /* =========================================
   ADVANCED RESPONSIVE SYSTEM
    ========================================= */

    /* Modern Container */
    .container-fluid-custom{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding-inline:clamp(1rem,4vw,3rem);
    }

    /* =========================================
    NAVBAR MOBILE
    ========================================= */

    .nav-toggle{
    display:none;
    font-size:28px;
    color:var(--c-fg);
    cursor:pointer;
    }

    @media (max-width:900px){

    .navbar{
    flex-wrap:wrap;
    padding:1rem 1.5rem;
    }

    .nav-toggle{
    display:block;
    }

    .nav-links{
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    display:none;
    }

    .nav-links.active{
    display:flex;
    }

    .nav-socials{
    width:100%;
    justify-content:center;
    margin-top:.5rem;
    }

    }

    /* =========================================
    HERO MOBILE OPTIMIZATION
    ========================================= */

    @media (max-width:1024px){

    .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
    }

    .hero-text{
    padding:3rem 1.5rem;
    }

    .hero-desc{
    margin:auto;
    }

    .hero-btns{
    justify-content:center;
    }

    .hero-image{
    height:auto;
    justify-content:center;
    }

    .hero-image img{
    position:relative;
    max-width:420px;
    height:auto;
    }

    }

    /* =========================================
    STATS RESPONSIVE
    ========================================= */

    @media (max-width:768px){

    .stats-bar-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
    padding:1.5rem;
    }

    .platform-group{
    flex-wrap:wrap;
    justify-content:center;
    }

    .platform-item{
    font-size:18px;
    }

    }

    /* =========================================
    EPISODES MOBILE
    ========================================= */

    @media (max-width:900px){

    .episodes-grid{
    grid-template-columns:1fr;
    gap:2rem;
    }

    .pop-item{
    flex-direction:column;
    align-items:flex-start;
    }

    .pop-thumb{
    width:100%;
    height:180px;
    }

    }

    /* =========================================
    CATEGORY GRID AUTO RESPONSIVE
    ========================================= */

    .cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:1.5rem;
    justify-items:center;
    }

    /* =========================================
    HOST SECTION MOBILE
    ========================================= */

    @media (max-width:900px){

    .host-grid{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:center;
    }

    .host-avatar-row{
    flex-direction:column;
    align-items:center;
    }

    .host-btns{
    justify-content:center;
    }

    }

    /* =========================================
    NEWSLETTER MOBILE
    ========================================= */

    @media (max-width:600px){

    .newsletter-form{
    flex-direction:column;
    gap:1rem;
    }

    .newsletter-form input{
    width:100%;
    }

    }

    /* =========================================
    FOOTER RESPONSIVE
    ========================================= */

    @media (max-width:900px){

    .footer-top{
    grid-template-columns:1fr 1fr;
    gap:2rem;
    }

    }

    @media (max-width:600px){

    .footer-top{
    grid-template-columns:1fr;
    text-align:center;
    }

    .footer-bottom{
    flex-direction:column;
    gap:1rem;
    }

    .footer-socials{
    justify-content:center;
    }

    .footer-legal{
    justify-content:center;
    flex-wrap:wrap;
    }

    }

    /* =========================================
    SMALL MOBILE
    ========================================= */

    @media (max-width:480px){

    .hero-subtitle{
    font-size:18px;
    }

    .hero-desc{
    font-size:14px;
    }

    .stat-label{
    font-size:16px;
    }

    .platform-item{
    font-size:16px;
    }

    }


    .navbar{
        position:absolute;
        top:0;
        left:0;
        right:0;
        z-index:999;
        transition:all .3s ease;
        }

        /* SCROLL STICKY */
    .navbar.sticky{
        position:fixed;
        /* background:rgba(0,0,0,0.9); */
        backdrop-filter:blur(10px);
        box-shadow:0 5px 20px rgba(0,0,0,0.4);
    }

    .menu-toggle{
        display:none;
        font-size:28px;
        color:white;
        cursor:pointer;
        }

        /* MOBILE */
        @media (max-width:768px){

        .menu-toggle{
        display:block;
        }

        .nav-links{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#000;
        flex-direction:column;
        text-align:center;
        padding:20px 0;
        display:none;
        }

        .nav-links.active{
        display:flex;
        }

        .nav-socials{
        display:none;
        }

        }