:root{
    --bg:#0b0b0d;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    --accent: #7be2ff;
    --text: #e9eef3;
    --muted: rgba(233,238,243,0.5);
    --glass: rgba(255,255,255,0.03);
    --progress-h: 4px;
    --max-width: 1200px;
  }

  /* Light mode toggle automatic */
  @media (prefers-color-scheme: light){
    :root{
      --bg: #f4f7fb;
      --card-bg: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
      --accent: #0066ff;
      --text: #0b1220;
      --muted: rgba(11,18,32,0.45);
      --glass: rgba(255,255,255,0.6);
    }
  }

  * {
    box-sizing:border-box
  }

  .carousel-content {
    overflow: hidden;
    height:100%;
    margin:20px;
    /*background: radial-gradient(1200px 600px at 10% 10%, rgba(123,226,255,0.03), transparent 10%),
                radial-gradient(900px 450px at 90% 90%, rgba(123,226,255,0.02), transparent 8%),
                var(--bg);*/
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
  }

  .stage{
    width:100%;
    max-width:var(--max-width);
    position:relative;
    perspective:1400px;
    user-select:none;
  }

  /* Header / Controls */
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    gap:12px;
  }

  .title{
    font-weight:600;
    font-size:2.05rem;
    letter-spacing:0.2px;
  }

  .controls{
    display:flex;
    gap:8px;
    justify-content: center;
    /*align-items:center;*/
  }

  .btn{
    background:var(--glass);
    border:1px solid rgba(255,255,255,0.04);
    padding:8px 12px;
    border-radius:10px;
    color:var(--text);
    cursor:pointer;
    font-size:0.95rem;
    display:inline-flex;
    gap:8px;
    align-items:center;
    transition:transform .18s ease, background .18s;
  }
  .btn:hover{ transform:translateY(-3px) }

  .txt-title {
    font-size: 2em;
  }

  /* Carousel viewport */
  .carousel{
    width:100%;
    /* height:460px; */
    position:relative;
    overflow:visible; /* allow coverflow sides */
  }

  .track{
    height:100%;
    transform-style:preserve-3d;
    will-change: transform;
    position:relative;
    /* center container via transform in JS */
  }

  /* Each card wrapper - occupies center area; we'll position by JS */
  .card{
    position:absolute;
    top:50%;
    left:50%;
    transform-style:preserve-3d;
    transform-origin:center center;
    transition: transform 650ms cubic-bezier(.2,.9,.28,1), opacity 350ms ease;
    width:420px;
    height:300px;
    margin-top:-150px; /* half height */
    margin-left:-210px; /* half width */
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    pointer-events:auto;
    background-color: transparent;
  }

  /* Inner visual (image + glass overlay) */
  .card-inner{
    max-width:420px;
    max-height:300px;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    background:var(--card-bg);
    box-shadow:
      0 30px 60px rgba(2,6,23,0.55),
      0 6px 16px rgba(2,6,23,0.25);
    transform-style:preserve-3d;
    cursor:pointer;
  }

  .img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:translateZ(20px) scale(1.02);
    transition: transform 600ms cubic-bezier(.2,.9,.28,1);
  }

  .card:hover .img{
    transform: translateZ(40px) scale(1.05);
  }

  /* glass gradient & shine */
  .glass{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    mix-blend-mode:overlay;
  }

  .meta{
    position:absolute;
    left:18px;
    bottom:16px;
    color:var(--text);
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
    font-weight:600;
    letter-spacing:0.2px;
    background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12));
    padding:8px 12px;
    border-radius:10px;
    backdrop-filter: blur(6px);
    font-size:0.95rem;
  }

  .meta small{ display:block; font-weight:400; font-size:0.8rem; color:var(--muted) }

  /* Shadow reflection subtle */
  .card:after{
    content:'';
    position:absolute;
    left:10%;
    right:10%;
    bottom:-22px;
    height:24px;
    filter:blur(20px);
    background:radial-gradient(closest-side, rgba(2,6,23,0.55), transparent 60%);
    opacity:0.55;
    border-radius:50%;
    transform:translateZ(-80px) scaleX(1.4);
    z-index:-2;
  }

  /* Navigation arrows */
  .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font-size:22px;
    cursor:pointer;
    user-select:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
    box-shadow:0 8px 24px rgba(2,6,23,0.45);
    border:1px solid rgba(255,255,255,0.04);
  }
  .arrow.left{ left:-8px }
  .arrow.right{ right:-8px }

  .arrow:active{ transform:translateY(-50%) scale(.98) }

  /* Dots & progress */
  .bottom-bar{
    position: absolute;
    left:0; right:0;
    bottom:-6px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:10px 0 0;
  }

  .dots{
    display:flex;
    gap:8px;
  }

  .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    transition: all 280ms ease;
    cursor:pointer;
  }

  .dot.active{
    transform:scale(1.5);
    background:var(--accent);
    box-shadow:0 6px 18px rgba(0,0,0,0.45), 0 0 8px rgba(123,226,255,0.18);
  }

  .progress{
    width:200px;
    height:var(--progress-h);
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    overflow:hidden;
    position:relative;
  }

  .progress > i{
    position:absolute;
    left:0; top:0; bottom:0;
    width:0%;
    background:linear-gradient(90deg, var(--accent), rgba(255,255,255,0.12));
    transition:width linear;
  }

  /* Popup fullscreen cinematic */
  .popup{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10000;
    background:rgba(2,6,23,0.75);
    backdrop-filter: blur(8px) brightness(.85);
    padding:28px;
    height: 100vh;
  }

  .popup:hover{
    color: red;

  }

  .popup-inner{
    width:min(1100px,95%);
    max-height:92vh;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));
    display:grid;
    grid-template-columns: 1fr 380px;
    gap:20px;
    align-items:center;
    padding:22px;
    transform-origin:center;
    animation:popupIn .45s cubic-bezier(.2,.9,.28,1);
  }

  @keyframes popupIn{
    from{ transform:scale(.96) translateY(8px); opacity:0 }
    to{ transform:scale(1) translateY(0); opacity:1 }
  }

  .popup-media{
    max-width:100%;
    position: relative;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .popup-media img{ 
    max-width:100%; 
    max-height:100%;
    /*width:600px;  */
    height:500px;
    border-radius:12px;
    object-fit:cover; 
    /*display:block*/
    objet-fit: cover
  }

  .popup-meta{
    padding:8px 6px;
    color:var(--text);
  }
  .popup-meta h2{ margin:0 0 6px; font-size:1.35rem }
  .popup-meta p{ margin:8px 0; color:var(--muted) }

  .popup-close{
    position:absolute;
    right:22px;
    top:22px;
    font-size:28px;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
    cursor:pointer;
    z-index:1100;
  }

  .popup-nav{
    position:absolute;
    left:12px;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    pointer-events:none;
  }

  .popup-nav button{
    pointer-events:auto;
    border-radius:12px;
    width:58px;height:58px;
    border:0;background:rgba(255,255,255,0.05);
    font-size:24px;cursor:pointer;
  }

  /* responsive */
  @media (max-width:980px){
    .card{ width:340px; margin-left:-170px }
    .popup-inner{ grid-template-columns: 1fr 300px }
  }
  @media (max-width:712px){
    * {
      margin: 0;
      padding: 0;
      box-sizing:border-box
    }
    .txt-title {
      font-size: 1.5em;
    }

    .popup{
      position:fixed;
      inset:0;
      width: 712px;
      height: 100vh;
      padding:0;
      margin: 0;
      align-items:center;
      justify-content:center;
    }

    .card{ width:300px; margin-left:-150px }
    .carousel{ height:420px }
    .popup-inner{ grid-template-columns: 1fr; padding:16px }

  }

  @media (max-width: 360px){
    * {
      margin: 0;
      padding: 0;
      box-sizing:border-box
    }
    .txt-title {
      font-size: 1.5em;
    }

    .popup{
      position:fixed;
      inset:0;
      width: 360px;
      height: 100vh;
      padding:0;
      margin: 0;
      align-items:center;
      justify-content:center;
    }

  }


  /* small helper */
  .sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }