/* =============================================
   UltraIPTV — Experience Showcase Section
   (Bento gallery section, placed before pricing)
   ============================================= */
:root{
  --exp-ink:#1c0c14;
  --exp-muted:#7c6b74;
}

  .ftco-experience{
    padding:86px 16px 96px 16px;
    background:#faf7f8;
    position:relative;
    overflow:hidden;
  }

  .ftco-experience::before{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    top:-220px;
    left:-180px;
    background:radial-gradient(circle, rgba(255,45,120,0.10) 0%, rgba(255,45,120,0) 70%);
    border-radius:50%;
    pointer-events:none;
  }
  .ftco-experience::after{
    content:'';
    position:absolute;
    width:460px;
    height:460px;
    bottom:-200px;
    right:-160px;
    background:radial-gradient(circle, rgba(255,45,120,0.08) 0%, rgba(255,45,120,0) 70%);
    border-radius:50%;
    pointer-events:none;
  }

  .experience-inner{
    max-width:1160px;
    margin:0 auto;
    position:relative;
    z-index:1;
  }

  .experience-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 50px auto;
  }

  .experience-header h2{
    font-family:'Playfair Display', serif;
    color:var(--exp-ink);
    font-weight:800;
    font-size:clamp(34px, 5.4vw, 56px);
    margin:0 0 18px 0;
    line-height:1.18;
    letter-spacing:0.2px;
  }

  .experience-header h2 em{
    font-style:normal;
    background:linear-gradient(135deg, var(--pink), var(--pink-dark));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    position:relative;
    white-space:nowrap;
  }

  .experience-header .underline{
    width:74px;
    height:4px;
    background:linear-gradient(90deg, var(--pink-light), var(--pink), var(--pink-dark));
    margin:0 auto 20px auto;
    border-radius:4px;
  }

  .experience-header p{
    color:var(--exp-muted);
    font-size:15.5px;
    line-height:1.8;
    margin:0;
  }

  /* ===== Bento showcase grid — uniform square tiles ===== */
  .experience-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }

  .exp-tile{
    position:relative;
    aspect-ratio:1 / 1;
    border-radius:22px;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 10px 26px rgba(50,10,30,0.12);
    border:1px solid rgba(28,12,20,0.06);
    cursor:pointer;
  }

  .exp-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
  }

  .exp-tile:hover img{
    transform:scale(1.09);
    filter:saturate(1.12) brightness(0.92);
  }

  .exp-tile .tile-tag{
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:var(--pink-dark);
    font-size:10px;
    font-weight:800;
    letter-spacing:0.8px;
    text-transform:uppercase;
    padding:6px 13px;
    border-radius:20px;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
    transition:transform 0.4s ease;
  }
  .exp-tile:hover .tile-tag{
    transform:translateY(-3px);
  }

  .exp-tile .tile-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(28,12,20,0) 35%, rgba(20,6,12,0.55) 78%, rgba(15,4,9,0.86) 100%);
    transition:background 0.4s ease;
  }
  .exp-tile:hover .tile-overlay{
    background:linear-gradient(180deg, rgba(28,12,20,0.05) 20%, rgba(20,6,12,0.68) 72%, rgba(15,4,9,0.92) 100%);
  }

  .exp-tile .tile-caption{
    position:absolute;
    left:18px;
    right:18px;
    bottom:16px;
    z-index:2;
    color:#fff;
  }
  .exp-tile .tile-caption h4{
    margin:0 0 4px 0;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:0.2px;
    text-shadow:0 2px 8px rgba(0,0,0,0.35);
  }
  .exp-tile .tile-caption p{
    margin:0;
    font-size:11.5px;
    font-weight:400;
    opacity:0.88;
    line-height:1.5;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  }
  .exp-tile:hover .tile-caption p{
    max-height:40px;
    opacity:0.92;
    margin-top:4px;
  }

  .exp-tile .tile-icon{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--pink), var(--pink-dark));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    box-shadow:0 6px 16px rgba(255,45,120,0.4);
    opacity:0;
    transform:scale(0.6) rotate(-15deg);
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  .exp-tile:hover .tile-icon{
    opacity:1;
    transform:scale(1) rotate(0deg);
  }

  /* Two tiles emphasized just via a pink ring on hover-lift (still same size) */
  .exp-tile:hover{
    box-shadow:0 20px 38px rgba(255,45,120,0.22);
    transform:translateY(-6px);
  }
  .exp-tile{
    transition:transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
  }

  .experience-cta{
    text-align:center;
    margin-top:44px;
  }
  .experience-cta a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:linear-gradient(135deg, var(--pink), var(--pink-dark));
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:13.5px;
    letter-spacing:0.4px;
    text-transform:uppercase;
    padding:15px 38px;
    border-radius:30px;
    box-shadow:0 12px 26px rgba(255,45,120,0.35);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .experience-cta a:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(255,45,120,0.45);
    color:#fff;
  }

  /* ===== Responsive ===== */
  @media (max-width: 991.98px){
    .experience-grid{
      grid-template-columns:repeat(2, 1fr);
    }
  }
  @media (max-width: 575.98px){
    .ftco-experience{ padding:64px 14px 70px 14px; }
    .experience-grid{
      grid-template-columns:1fr;
      gap:16px;
    }
    .exp-tile{ aspect-ratio:4 / 3; }
  }