/* Title */
  .spotlight__title{
    text-align:center;
    font-size:32px;
    font-weight:800;
    color:#000;
    letter-spacing:0.5px;
    margin-bottom:10px;
    animation:fadeDown 0.8s ease both;
  }
  .spotlight__divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-bottom:30px;
    animation:fadeDown 0.9s ease both;
  }
  .spotlight__divider span:first-child{
    width:48px;height:4px;background:#e6a817;border-radius:2px;
  }
  .spotlight__divider span:last-child{
    width:8px;height:8px;background:#e6a817;border-radius:50%;
  }
 
  /* Main card */
  .spotlight__card{
    position:relative;
    background:#191531;
    border-radius:24px;
    max-width:1300px;
    margin:0 auto;
    padding:60px 40px;
    overflow:hidden;
    /*transform-style:preserve-3d;*/
    perspective:1200px;
    /*animation:cardIn 1s ease both;*/
    box-shadow:0 40px 80px rgba(0,0,0,0.6);
  }
 
  /* Arch cutout */
  .spotlight__arch{
    position:absolute;
    top:-80px;left:50%;
    transform:translateX(-50%);
    width:420px;height:420px;
    background:#fff;
    border-radius:50%;
    z-index:0;
    animation:archGlow 3s ease-in-out infinite alternate;
  }
 
  /* Grid layout */
  .spotlight__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 320px 1fr;
    gap:20px;
    align-items:center;
  }
 
  /* Feature columns */
  .spotlight__col{
    display:flex;
    flex-direction:column;
    gap:36px;
  }
  .spotlight__col--right{
    align-items:flex-end;
    text-align:right;
  }
 
  /* Feature item */
  .feature{
    display:flex;
    align-items:flex-start;
    gap:16px;
    animation:featureIn 0.7s ease both;
    transform-style:preserve-3d;
    cursor:default;
  }
  .spotlight__col--right .feature{
    flex-direction:row-reverse;
  }
  .feature:hover{
    transform:translateZ(20px) scale(1.04);
  }
  .feature__icon{
    width: 45px;
  height: 45px;
  min-width: 45px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-size: 25px;
  top: -8px;
  }
  .feature__icon::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(circle,rgba(230,168,23,0.25),transparent);
    opacity:0;
    transition:opacity 0.4s;
    border-radius:50%;
  }
  .feature:hover .feature__icon::before{opacity:1}
  .feature:hover .feature__icon{
    border-color:#e6a817;
    box-shadow:0 0 20px rgba(230,168,23,0.4),0 0 40px rgba(230,168,23,0.15);
    transform:rotateY(15deg) rotateX(-10deg) scale(1.1);
  }
  .feature__icon svg{
    width:24px;height:24px;
    fill:none;stroke:#9bccd8;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
    transition:stroke 0.4s;
  }
  .feature:hover .feature__icon svg{stroke:#e6a817}
  .feature__text{
    padding-top:4px;
  }
  .feature__text p{
    font-size:clamp(16px,1.4vw,14px);
    font-weight:700;
    color:#fff;
    line-height:1.4;
  }
 
  /* Center image wrapper */
  .spotlight__image-wrap{
    position:relative;
    z-index:3;
    display:flex;
    justify-content:center;
    align-items:center;
    height:260px;
    user-select:none;
  }
  .spotlight__image{
    width:100%;
    max-width:300px;
    object-fit:contain;
    cursor:grab;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.7));
    transition:filter 0.3s;
    animation:float 4s ease-in-out infinite;
    will-change:transform;
  }
  .spotlight__image:active{cursor:grabbing;animation:none;filter:drop-shadow(0 30px 50px rgba(230,168,23,0.4))}
 
  /* Floating particles */
  .particle{
    position:absolute;
    border-radius:50%;
    background:#e6a817;
    opacity:0;
    animation:particle 6s ease-in-out infinite;
    pointer-events:none;
  }
 
  /* Keyframes */
  @keyframes fadeDown{
    from{opacity:0;transform:translateY(-24px)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes cardIn{
    from{opacity:0;transform:perspective(1200px) rotateX(8deg) scale(0.95)}
    to{opacity:1;transform:perspective(1200px) rotateX(0deg) scale(1)}
  }
  @keyframes featureIn{
    from{opacity:0;transform:translateX(-30px)}
    to{opacity:1;transform:translateX(0)}
  }
  @keyframes float{
    0%,100%{transform:translateY(0) rotateY(0deg)}
    50%{transform:translateY(-14px) rotateY(4deg)}
  }
  @keyframes archGlow{
    from{box-shadow:0 0 60px rgba(255,255,255,0.12)}
    to{box-shadow:0 0 120px rgba(255,255,255,0.25)}
  }
  @keyframes particle{
    0%{opacity:0;transform:translateY(0) scale(0)}
    20%{opacity:0.8}
    80%{opacity:0.3}
    100%{opacity:0;transform:translateY(-80px) scale(1.5)}
  }
  @keyframes pulse3d{
    0%,100%{box-shadow:0 0 0 0 rgba(230,168,23,0.5)}
    50%{box-shadow:0 0 0 12px rgba(230,168,23,0)}
  }
 
  /* Delay helpers */
  .feature:nth-child(1){animation-delay:0.2s}
  .feature:nth-child(2){animation-delay:0.35s}
  .feature:nth-child(3){animation-delay:0.5s}
 
  /* Card tilt glow */
  .spotlight__card::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(230,168,23,0.04),transparent 60%);
    border-radius:24px;
    pointer-events:none;
    z-index:1;
    transition:opacity 0.5s;
  }
 
  /* Responsive */
  @media(max-width:900px){
    .spotlight__grid{
      grid-template-columns:fr;
      grid-template-rows:auto auto auto;
    }
    .spotlight__col--right{
      align-items:flex-start;
      text-align:left;
    }
    .spotlight__col--right .feature{flex-direction:row}
    .spotlight__arch{width:300px;height:300px;top:-60px}
    .spotlight__image-wrap{height:240px;order:-1}
    .spotlight__image{max-width:220px}
    .feature__text p {
      font-size: clamp(12px,1.4vw,14px);
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
      letter-spacing: 1.2px;
    }
  }
  @media(max-width:600px){
    .spotlight__card{padding:40px 20px;}
    .spotlight__arch{width:220px;height:220px;}
    #hgh {
      padding: 20px 35px;
    }
    .feature__text p {
  font-size: clamp(12px,1.4vw,14px);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 1.2px;
}
  }
  
  
  #hgh {
      padding: 20px 0px;
  }