:root{
        --bg-body: #000;
        --bg-elev: #1A1A1A;
        --bg-elev-2: #1a1f28;
        --muted: #ffffffc4;
        --chip-bg: rgba(255,255,255,.10);
        --chip-br: rgba(255,255,255,.35);
        --teal: #7de7ff;
        --orange: #ff8d5b;
        --blue: #8aa3ff;
        --clr-bg: #0a0e12;
        --clr-text: #ffffff;
        --clr-blc-text: #000;
        --clr-accent: #8aa3ff;
        --chip-bg: #fff;
        /* CTA button tunables */
        --corner: 14px;
        --thick: 1px;
        --offset: 0px;
      }
      h1{
        font-size: 72px !important;
        color: var(--clr-text) !important;
      }
      h2{
        font-size: 48px !important;
        color: var(--clr-text) !important;
      }
      h3{
        font-size: 22px !important;
        color: var(--clr-text) !important;
      }
      p{
        font-size: 17px !important;
        color: var(--muted) !important;
      }
      *,
      *::before,
      *::after{ box-sizing: border-box; }
      
      body{
        background: var(--bg-body);
        color: var(--clr-text);
        font-family: "TT Firs Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      @media (min-width: 1200px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            max-width: 1350px;
        }
    }
    .navbar{
        z-index: 11;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav-link{
        font-size: 17px;
        color: var(--clr-text);
    }
      .hero{
        position: relative;
        background: var(--clr-bg);
        color: var(--clr-text);
        min-height: 808px; /* mobile minimum */
        font-family: "TT Firs Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
        overflow: hidden;
        background-image: url('../Media/HERO-bg.jpg');
      }
    
      .hero__bg-video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
      }
      .hero::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:1;
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0.32) 100%) !important;
        pointer-events:none;
      }
    
      .hero__content{
        position: relative;
        z-index: 2;
        height: 100%;
      }
    
      .chip{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
        padding:.5rem .9rem;
        border-radius: 999px;
        background: var(--chip-bg);
        color: var(--clr-blc-text);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
      }
    
      .hero__title{
        letter-spacing: .2px;
        font-size: 72px;
        font-weight: 400;
      }
      .hero__kicker{
        color: var(--clr-text);
        font-size: 17px;
        font-weight: 400;
      }
    
      .hero__list{
        list-style: none;
        padding-left: 0;
        margin-bottom: 2rem;
      }
      .hero__list li{
        position: relative;
        padding-left: 1.6rem;
        margin: .3rem 0;
        color: var(--clr-text);
        font-size: 17px;
        font-weight: 400;
      }
      .hero__list li::before{
        content: ">";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--clr-text); /* soft teal bullet */
        font-weight: 400;
      }

      .btn-hero{
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 1.25rem 3rem;
        min-height: 75px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #fff;
        border: 0;
        border-radius: 0;                
        background: rgba(255,255,255,.20); 
        backdrop-filter: blur(12px);      
        -webkit-backdrop-filter: blur(12px);
        background-image:
          linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),
          linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),
          linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),
          linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
        background-size:
          var(--corner) var(--thick), var(--thick) var(--corner),
          var(--corner) var(--thick), var(--thick) var(--corner),
          var(--corner) var(--thick), var(--thick) var(--corner),
          var(--corner) var(--thick), var(--thick) var(--corner);
        background-position:
          left var(--offset) top var(--offset),    left var(--offset) top var(--offset),
          right var(--offset) top var(--offset),   right var(--offset) top var(--offset),
          left var(--offset) bottom var(--offset), left var(--offset) bottom var(--offset),
          right var(--offset) bottom var(--offset),right var(--offset) bottom var(--offset);
        background-repeat: no-repeat;
      }   
      .btn-hero:hover,
      .btn-hero:focus{
        background-color:  rgba(255,255,255,.40);
      }
      /* Accessibility: honor prefers-reduced-motion — hide video, use poster */
      @media (prefers-reduced-motion: reduce){
        .hero__bg-video{ display: none; }
        .hero{
          background:
            linear-gradient(180deg, rgba(4,8,12,.75), rgba(4,8,12,.75)),
        }
      }
  
  /* ----------------------------------------------
     INTRO (headline + audience cards)
  ---------------------------------------------- */
  .intro{
    padding-block: 4rem;
  }
  .audience__card{
    background: var(--bg-elev);
    color: var(--clr-text);
    padding: 1rem 1.25rem;
    min-height: 250px;
  }
  
  /* ----------------------------------------------
     STATS STRIP
  ---------------------------------------------- */
  .stats{
    padding-block: 3.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .stats__headline{
    color: var(--clr-text);
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
    max-width: 36ch;
  }
  .stats__item{
    text-align: left;
  }
  .stats__item .label{
    color: var(--muted);
  }
  
  /* ----------------------------------------------
     EXPECTATION GRID
  ---------------------------------------------- */
  .expect{
    padding-block: 4.5rem;
  }
  .expect__tile{
    background: var(--bg-elev);
    min-height: 170px;
    padding: 1.25rem 1.25rem 1rem;
    color: var(--muted);
  }
  .expect__tile h4{
    color: var(--clr-text);
    font-size: 1.05rem;
    margin-bottom: .4rem;
  }
  .expect__index{
    color: var(--muted);
    letter-spacing: .15em;
    font-size: .9rem;
  }
  .expect__tile--cta{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    display: grid; place-items:center;
    color:#fff;
  }
  
  /* ----------------------------------------------
     TIMELINE
  ---------------------------------------------- */
  .schedule{
    position: relative;
  }
  .schedule-bg-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    z-index:0;
  }
  .line-img{
    z-index: 1;
    position: relative;
    width: 100%;
  }
  .circle-img, .circle-img-mbl{
    z-index: 1;
    position: relative;
    width: 100%;
  }
  .img-col{
    line-height: 0;
  }
  .text-column{
    background-color: #000;
    position: relative;
    z-index: 3;
    line-height: 1;
    padding: 20px 0 0 20px;
    height: 100%;
  }
  
  /* ----------------------------------------------
     SPEAKERS
  ---------------------------------------------- */
  .speakers{
    padding-block: 4.5rem;
  }
  .speaker-card{
    background: var(--bg-elev);
    border: 1px solid rgba(255,255,255,.06);
  }
  .speaker-card .ratio > img{
    width:100%; height:100%; object-fit:cover;
  }
  .speaker-card__body{
    padding: .9rem 1rem 1.1rem;
  }
  .speaker-card__name{
    font-weight: 600; margin:0;
  }
  .speaker-card__meta{
    color: var(--muted);
    font-size: .95rem;
  }
  .speaker-card__desc{
    color: var(--muted);
    font-size: .95rem;
    margin-top: .35rem;
  }
  .ratio-1x1{
    --bs-aspect-ratio: 157%;
  }
  
  /* ----------------------------------------------
     LOGO STRIP
  ---------------------------------------------- */
  .logo-strip{
    padding-block: 2.5rem;
    opacity: .85;
    position: relative;
    padding-block: 4.5rem;
    background:url("../Media/CTA-bg.jpg");
    background-position: bottom center;
    background-size: cover;
  }
  .logo-strip .logo{
    color: #d9dce6;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    padding:.6rem 1.2rem;
    border-radius:999px;
  }
  #logos-splide{
    -webkit-mask-image: linear-gradient(90deg,rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 90%);
            mask-image: linear-gradient(90deg,rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 90%);
  }
  .cta-band{
    padding: 150px 0 !important;
  }
  .splide__slide img{
    max-height: 50px;
  }
  
  /* ----------------------------------------------
     FOOTER
  ---------------------------------------------- */
  .site-footer{
    padding-block: 3rem;
    background: #070a0e;
    color: var(--muted);
  }
  .site-footer h6{
    color: #e9ecf4;
    letter-spacing: .3px;
  }
  .footer-brand small{ color: var(--muted); display:block; }
  
  @media(max-width: 991px){
    .ratio{
        --bs-aspect-ratio: 130% !important;
    }
  }
@media (max-width: 767px) {
    .navbar{
    left: unset;
    transform: translateX(0%);
    right: 0;
    }
    .hero{
        padding-top: 100px;
        background-image: url('../Media/HERO-mbl-bg.jpg');
    }
    .hero__title{
        font-size: 32px !important;
    }
    .intro-headline{
        font-size: 28px !important;
        max-width: 370px;
        margin: 0 auto;
    }
    .audience__card{
        padding: 2rem 2.25rem;
    }
    h2{
        font-size: 32px !important;
    }
    h1{
        font-size: 52px !important;
    }
    #logos-splide{
        -webkit-mask-image: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(255, 255, 255, 0) 100%);
        mask-image: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(255, 255, 255, 0) 100%);
    }
    .cta-band{
        padding: 100px 0 0 !important;
    }
    .btn-hero{
        width: 100%;
    }
    .circle-img{
        display: none;
    }
    .schedule{
        padding: 0 20px;
    }
    .col-left{
        width: 50px;
    }
    .col-right{
        width: calc(100% - 50px);
        padding: 130px 0 0 !important;
        background-color: #000 !important;
        z-index: 1;
    }
    .navbar-collapse{
      background-color: #00000072;
    }
    
}