/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;

    background: url("bgNEO.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #f5c6c6;
    min-height: 100vh;
}




.container::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);

    width: 900px;
    height: 500px;

    background: radial-gradient(
        ellipse at center,
        rgba(245, 198, 198, 0.15),
        rgba(245, 198, 198, 0.08) 40%,
        transparent 70%
    );

    filter: blur(40px);
    pointer-events: none;

    z-index: 1;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 32px 80px;

    background: rgba(12, 12, 12, 0.75); /* ← THIS */

    border-left: 1px solid #232323;
    border-right: 1px solid #232323;

    backdrop-filter: blur(6px); /* increase slightly for nicer effect */

    position: relative;
    z-index: 1;
}

.hero {
    margin-bottom: 36px;
    position: relative;
    z-index: 1;

     background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(20px);

    border: 1px solid #2a2a2a;
    border-radius: 24px;

    padding: 48px 56px;

    box-shadow:
        0 40px 80px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.04);
    }

.hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.hero-text {
    flex: 1;
    min-width: 0;
}

.hero-image {
    flex-shrink: 0;
}

.hero-image img {
    width: 220px;
    height: auto;

    border-radius: 18px;

    border: 1px solid #2a2a2a;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.5),
        0 0 20px rgba(245, 198, 198, 0.08);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-image img:hover {
    transform: translateY(-4px) scale(1.02);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.6),
        0 0 30px rgba(245, 198, 198, 0.12);
}

.hero-inner {
    padding: 36px 40px;

    border-radius: 28px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.035),
        rgba(255,255,255,0.01)
    );

    border: 1px solid rgba(255,255,255,0.05);

    box-shadow:
        0 25px 80px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter: blur(6px);
}

/* Title */
.hero h1 {
    font-size: 52px;
    margin-bottom: 18px;
}

/* Subtitle */
.hero .subtitle {
    margin-bottom: 20px;
}

/* Meta badge */
.hero .meta {
    margin-bottom: 28px;
}

/* LIST */
.hero-list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-list-title {
    font-size: 22px;
    font-weight: 600;
    color: #f5c6c6;

    margin-top: 28px;
    margin-bottom: 16px;

    letter-spacing: 0.3px;
}

.hero-intro {
    max-width: 760px;
    margin-bottom: 28px;
}

.hero-intro p {
    margin: 0 0 14px;
    color: #d8b8b8;
    font-size: 17px;
    line-height: 1.75;
}

.hero-intro p:first-child {
    color: #f3d0d0;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Each item */
.hero-list li {
    position: relative;
    padding-left: 28px;

    color: #e6c6c6;
    font-size: 16px;
}

/* Heart icon */
.hero-list li::before {
    content: "♥";
    position: absolute;
    left: 0;
    top: 0;

    color: #f5c6c6;
    font-size: 14px;

    opacity: 0.9;
}

/* subtle glowing top light */
.hero::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 200px;

    background: radial-gradient(
        ellipse at center,
        rgba(245, 198, 198, 0.06),
        transparent 70%
    );

    pointer-events: none;
}

/* TITLE */
h1 {
    font-size: 60px;
    line-height: 1.05;
    margin: 0 0 20px;
    letter-spacing: -1.5px;

    color: #ffe2e2;

    text-shadow:
        0 0 20px rgba(245, 198, 198, 0.15),
        0 0 40px rgba(245, 198, 198, 0.05);
}

/* SUBTITLE */
.subtitle {
    max-width: 720px;
    color: #d4b3b3;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* META BADGE */
.meta {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #3a2f2f;

    color: #f0cccc;
    font-size: 14px;
    font-weight: 500;

    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.02),
        0 0 12px rgba(245, 198, 198, 0.05);
}



.section-spacer {
    height: 42px;
}

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #3a2f2f, transparent);
    margin: 12px 0 14px;
}

.section-divider {
    margin: 12px 0 20px;
}

.section-title {
    font-size: 22px;
    margin: 0 0 22px;
    color: #f3d0d0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}

.card {
    background: linear-gradient(to bottom, #1b1b1b, #161616);
    border: 1px solid #2a2a2a;
    border-radius: 22px;
    padding: 18px 18px 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.card-wrapper:hover .card {
    transform: translateY(-6px);
    border-color: #4a3a3a;
    background: linear-gradient(to bottom, #232323, #1b1b1b);

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(245, 198, 198, 0.08);
}

.card-wrapper:hover .card img {
    transform: scale(1.03);
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(
        to top,
        rgba(255,255,255,0.02),
        transparent
    );
    pointer-events: none;
}

.card img {
    width: 100%;
    display: block;
    border-radius: 16px;
    margin-bottom: 16px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
    color: #ffdede;
    text-shadow: 0 0 10px rgba(245, 198, 198, 0.15);
}

.card p {
    margin: 0 0 18px;
    color: #c2b5b5;
    font-size: 15px;
    line-height: 1.6;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tag {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #ebcaca;
    background: #241f1f;
    border: 1px solid #332a2a;
}

.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    background: #f5c6c6;
    color: #161616;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.15s ease, background 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
    background: #ffd6d6;
}

.button.secondary {
    background: transparent;
    color: #f0c9c9;
    border: 1px solid #3a3030;
}

.button.secondary:hover {
    background: rgba(255, 255, 255, 0.03);
}

.card-wrapper {
    position: relative;
}

/* keep your existing card-link fix */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* DOWNLOAD BUTTON */
.download-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    
    opacity: 0;
    transform: translateY(6px);

    padding: 6px 14px;
    border-radius: 12px;

    background: rgba(20, 20, 20, 0.85);
    border: 1px solid #3a2f2f;

    color: #f5c6c6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    backdrop-filter: blur(6px);

    transition: all 0.2s ease;
    z-index: 2;
}

.download-btn:hover {
    background: rgba(40, 30, 30, 0.95);
    border-color: #5a4444;
    transform: translateY(-1px);
}

.card-wrapper:hover .download-btn {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .container {
        padding: 48px 20px 60px;
    }

    h1 {
        font-size: 40px;
    }

    .subtitle {
        font-size: 16px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    /* ADD THIS PART */
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-image img {
        width: 180px;
        margin-top: 20px;
    }
}
    }
}