:root{
    --bg: #0b0b0f;
    --bg-2: #14141a;
    --fg: #f7f7fb;
    --muted:#a7a7b3;
    --brand:#6ea8fe;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --btn-bg:#1e1e27;
    --btn-fg:#f7f7fb;
  }

  body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fff; margin:0; color:#111;}
  a{color:#0b63ff; text-decoration:none;}
  a:hover{text-decoration:underline;}

  /* Trigger link */
  .open-link{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.7rem 1rem; border-radius:999px;
    background:#0b63ff; color:#fff; font-weight:600;
    box-shadow: var(--shadow);
  }
  .open-link svg{width:1.2rem; height:1.2rem;}

  /* Modal shell */
  /*.modal{
  width:300px;
  
    position:fixed; inset:0; display:none; place-items:center;
    background:rgba(8,10,16,.55);
    -webkit-backdrop-filter:saturate(120%) blur(10px);
    backdrop-filter:saturate(120%) blur(10px);
    z-index:9999;
  }
  .modal[aria-hidden="false"]{display:grid;}
  .modal__dialog{
    background:linear-gradient(180deg, var(--bg), var(--bg-2));
    color:var(--fg);
    width:min(100vw, 920px);
    max-height:90vh;
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    display:flex; flex-direction:column; 
  }*/

  /* Header */
  .modal__header{
    display:flex; align-items:center; justify-content:space-between;
    padding: .8rem 1rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .modal__title{font-size:1rem; font-weight:700; letter-spacing:.2px;}
  .modal__close{
    border:0; background:transparent; color:var(--muted);
    padding:.4rem; border-radius:8px; cursor:pointer;
  }
  .modal__close:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  .modal__close svg{width:22px; height:22px;}

  /* Carousel viewport */
  .carousel{
    position:relative; overflow:hidden; width:100%;
    background: #0e0e14;
	
  }
  .track{
  
  display: flex; /* Lay slides in a row */
gap: 0;
transition: transform .4s ease; /* Smooth slide */
alignment-adjust:
    will-change: transform;
    touch-action: pan-y;
  }
  
  .track > * {
flex: 0 0 100%; /* Exactly one slide per view */
max-width: 100%;
}
  .slide{
    width:300px; display:flex; align-items:center; justify-content:center;
    padding: 8px 8px 0;
  }
  .slide img{
    width:160px; height:auto; object-fit:contain;
    max-height: 58vh;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    background:#111;
  }

  /* Controls */
  .nav{
    position:absolute; inset-block:0; inset-inline:0;
    display:flex; align-items:center; justify-content:space-between;
    pointer-events:none;
  }
  .btn{
    pointer-events:auto; border:0; cursor:pointer;
    width:44px; height:44px; border-radius:999px;
    background:rgba(20,20,26,.75);
    color:var(--fg); display:grid; place-items:center;
    margin-inline:.5rem; box-shadow: var(--shadow);
  }
  .btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  .btn svg{width:22px; height:22px;}

  /* Dots */
  .dots{
    display:flex; gap:.4rem; justify-content:center; align-items:center;
    padding:.6rem .8rem .2rem;
  }
  .dot{
    width:8px; height:8px; border-radius:999px; background:#444;
    border:0; padding:0; cursor:pointer;
  }
  .dot[aria-current="true"]{background:#d9d9e3; transform:scale(1.15);}

  /* Caption */
  .caption{
    padding: .6rem 1rem 1rem; color:#ffffff; font-size:.95rem;
    line-height:1.35; min-height:2.6lh;
  }
  .caption b{ }
  .caption small{color:#9aa0ad;}

  /* Footer (optional actions) */
  .modal__footer{
    display:flex; justify-content:flex-end; gap:.6rem;
    padding: .6rem 1rem 1rem;
  }
  .cta{
    background:var(--btn-bg); color:var(--btn-fg);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:.6rem .9rem; font-weight:600; cursor:pointer;
  }
  .cta:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

  /* Small screens: modal fills the screen */
  @media (max-width: 640px){
    .modal__dialog{width:300px; max-height:310px; border-radius:0;}
    .slide img{max-height: 62vh;}
    .modal__header{padding: 0rem .8rem;}
    .caption{padding: .6rem .9rem 1rem;}
    .modal__footer{padding: .4rem .9rem 1rem;}
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce){
    .track{transition: none;}
  }
  /* === Carousel panel styling === */
.carousel-panel {
background: var(--card, #111418);
border: 1px solid #1a1f26;
border-radius: var(--radius, 18px);
padding-top: 0;
padding-bottom: 0;
padding-left: clamp(12px, 2vw, 18px);
padding-right: clamp(12px, 2vw, 18px);
display: flex;
flex-direction: column;
max-width: 350px;
}


/* Give the inline carousel a sensible height that adapts */
.carousel-panel .carousel {
position: relative;
width: 100%;
overflow: hidden; /* hide off-screen slides */
border-radius: calc(var(--radius, 18px) - 6px);
/* Maintain a soft aspect on desktop, grow on mobile */
min-height: 220px;
}
/* === Responsive 2-column wrapper === */
.featured {
display: flex;
gap: var(--gap, 1rem);
}


/* Single column by default (mobile: carousel below) */
@media (min-width: 800px) {
.featured {
align-items: stretch; /* make both panels equal height */
}
}
/* Single column by default (mobile: carousel below) */
@media (min-width: 800px) {
.feature-and-carousel {
align-items: stretch; /* make both panels equal height */
}
}
/* === Responsive 2-column wrapper === */
.feature-and-carousel {
display: flex;
flex-wrap: wrap;
gap: var(--gap, 1rem);
}

.feature-and-carousel > *{
  flex: 1 1 360px;        /* try to be ~360px wide; shrink/grow as needed */
  min-width: 260px;       /* don’t get too tiny */
}