:root {
    --bg: black;
    --card-w: 229px;
    --card-w-s1: 50px;
    --card-w-s2: 60px;
    --card-w-s3: 70px;
    --card-w-card: 70px;
    --card-h: 320px;
    --card-radius: 16px;
    --accent: grey;
    --glass: rgba(255,255,255,0.06);
    --text: #e6eef8;
    --muted: rgba(230,238,248,0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #071029 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:block;
  align-items:center;
  justify-content:center;
  padding:32px;
  gap:24px;
  min-height:100vh;
  line-height:1.3;
}

.wrap{
  display:grid;
  grid-template-columns: auto;
  gap:20px;
  align-items:center;
  max-width:1100px;
  width:100%;
}

/* card stage */
.stage{
  perspective:1200px; /* the strength of the 3D effect */
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}
/***************************/
/*cards*/
.card {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-radius);
    position: absolute;
    z-index: 3;
    left: var(--card-w-card);
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2,.9,.3,1);
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    user-select: none;
    outline: none;
}

/* reduced motion respects user preference */
    @media (prefers-reduced-motion: reduce) {
        .card {
            transition: none
        }
    }
    /* when flipped rotateY 180deg */
    .card.is-flipped {
        opacity: 1.0;
        transform: scale(1.1) translateX(20px) translateY(-20px) rotateY(180deg);
    }
    /* when flipped rotateY 180deg */
    .card.is-flipped-back {
        opacity: 0.0;
    }
    /* when flipped rotateY 180deg */
    .card.is-hovered {
        transform: scale(1.1) translateX(20px) translateY(-20px);
    }

.card__side {
    width: var(--card-w);
    height: var(--card-h);
    position: absolute;
    inset: 0;
    backface-visibility: hidden; /* hide backside while facing away */
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text);
}

.card__back {
    width: var(--card-w);
    height: var(--card-h);
     border: 1px solid rgba(255,255,255,0.70);
    box-shadow: 0 8px 30px rgba(7,10,25,0.6);
    transform: translateZ(0);
}

.card__front {
    width: var(--card-w);
    height: var(--card-h);
    border: 1px solid rgba(255,255,255,0.70);
    box-shadow: 0 8px 30px rgba(7,10,25,0.6);
    transform: rotateY(180deg);
}
    /********* stack **********/

    .card__stack__1 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 0;
        left: var(--card-w-s1);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
    }

    .card__stack__2 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 1;
        left: var(--card-w-s2);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
    }

    .card__stack__3 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 2;
        left: var(--card-w-s3);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
    }

    .card__stack__flipped__1 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 0;
        left: var(--card-w-s1);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
        opacity: 0.0;
    }

    .card__stack__flipped__2 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 1;
        left: var(--card-w-s2);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
        opacity: 0.0;
    }

    .card__stack__flipped__3 {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        position: absolute;
        z-index: 2;
        left: var(--card-w-s3);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        background: white;
        opacity: 0.0;
    }

    .card__placeholder {
        width: var(--card-w);
        height: var(--card-h);
        border: 1px solid rgba(255,255,255,0.70);
        border-radius: var(--card-radius);
        box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
        opacity: 0.0;
    }
    /* content inside */
    .badge {
        position: absolute;
        top: 14px;
        left: 14px;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--glass);
        color: var(--muted);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.02);
    }

    .title {
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 6px
    }

    .meta {
        font-size: 13px;
        color: var(--muted)
    }

    .back-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .front-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px
    }
    /* small helper controls */
    .controls {
        display: flex;
        gap: 12px;
        align-items: center
    }

    .btn {
        appearance: none;
        border: 0;
        padding: 10px 14px;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        color: var(--text);
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        border: 1px solid rgba(255,255,255,0.03);
    }

    .link {
        font-size: 13px;
        color: var(--muted);
        text-decoration: underline;
        cursor: pointer;
        background: none;
        border: 0;
        padding: 0
    }
    /* small responsive tweak */
    /* 
    @media (max-width:420px) {
        :root {
            --card-w: 280px
        }
    }*/
    /* hover hint */
    .hint {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px
    }
    /* little decorative glow when flipping */
    .card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity .25s;
        background: linear-gradient(120deg, rgba(255,255,255,0.03), transparent 30%);
    }

    .card:active::after {
        opacity: 1
    }

    .button1 {
        background-color: black;
        border-radius: 30px;
        border: black;
        color: white;
        padding: 30px 64px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

        .button1:hover {
            color: #ccc;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }

        .button1:active {
            color: black;
            box-shadow: 0 8px 16px 0 white, 0 6px 20px 0 white;
        }
    /*************** general styles ***************/

    h1 {
        font-size: 20px;
        margin: 0 0 6px 0
    }

    p.lead {
        margin: 0;
        color: var(--muted);
        font-size: 13px
    }

    p {
        font-family: Tahoma, Verdana, sans-serif;
    }

    a {
        font-family: Tahoma, Verdana, sans-serif;
    }

        a:link {
            color: white;
        }

        a:visited {
            color: white;
        }

        a:hover {
            color: grey;
        }

        a:active {
            color: white;
        }

        a:link, a:visited {
            text-decoration: none;
        }

        a:hover, a:active {
            text-decoration: underline;
        }

    .info {
        position: relative;
    }