/* ========================================
   MAAMVERSE
   MAIN STYLESHEET
======================================== */


/* ========================================
   RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background:
        radial-gradient(
            circle at top,
            #1d1038 0%,
            #080a18 45%,
            #03040b 100%
        );
    color: white;
    min-height: 100vh;
    overflow-x: hidden;
}


/* ========================================
   STAR BACKGROUND
======================================== */

.stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;

    background-image:
        radial-gradient(circle, white 1px, transparent 1px),
        radial-gradient(circle, #8f8cff 1px, transparent 1px),
        radial-gradient(circle, #6ba7ff 1px, transparent 1px);

    background-size:
        110px 110px,
        170px 170px,
        230px 230px;

    background-position:
        10px 20px,
        40px 70px,
        90px 130px;

    opacity: 0.55;
}


/* ========================================
   NAVIGATION BAR
======================================== */

.navbar {
    position: sticky;
    top: 0;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 6%;

    background: rgba(5, 6, 20, 0.82);
    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(151, 125, 255, 0.2);

    z-index: 1000;
}


/* NAV LOGO */

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-logo-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.nav-logo h2 {
    font-size: 20px;
    letter-spacing: 2px;
    white-space: nowrap;
}


/* NAV LINKS */

.navbar nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.navbar nav a {
    color: #bdbdca;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s ease;
}

.navbar nav a:hover {
    color: white;
    text-shadow: 0 0 15px #9b7cff;
}


/* ========================================
   GENERAL SECTION
======================================== */

.section {
    width: 100%;
    max-width: 1250px;
    margin: auto;
    padding: 120px 25px;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title span {
    color: #8d75ff;
    font-size: 15px;
    letter-spacing: 5px;
}

.section-title h2 {
    font-size: clamp(40px, 6vw, 65px);
    margin: 12px 0;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #9e8aff
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-title p {
    color: #aeadbb;
    font-size: 17px;
    line-height: 1.6;
}


/* ========================================
   IDENTITY
======================================== */

.identity-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}


/* IDENTITY MAIN CARD */

.identity-card {
    padding: 45px;
    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border: 1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 0 30px rgba(44, 30, 105, 0.2);
}


/* PROFILE IMAGE */

.profile-image-box {
    width: 180px;
    height: 180px;

    margin: 0 auto 25px;

    border-radius: 50%;
    overflow: hidden;

    border: 3px solid rgba(125, 105, 255, 0.6);

    box-shadow:
        0 0 25px rgba(105, 76, 255, 0.35);
}

.profile-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* IDENTITY TEXT */

.small-title {
    color: #9684ff;
    letter-spacing: 4px;
    font-size: 13px;
    margin-bottom: 15px;
}

.main-identity-card h3 {
    font-size: 30px;
    margin-bottom: 25px;
}

.main-identity-card p {
    color: #bebdca;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 17px;
}


/* PERSONALITY TAGS */

.personality-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.personality-tags span {
    padding: 10px 15px;
    border-radius: 30px;

    background:
        rgba(113, 87, 255, 0.12);

    border:
        1px solid rgba(140, 117, 255, 0.25);

    color: #d5d1ff;
    font-size: 14px;
}


/* IDENTITY DETAILS */

.identity-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    display: flex;
    gap: 20px;
    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 0 30px rgba(44, 30, 105, 0.2);

    transition: 0.3s ease;
}

.info-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(150, 130, 255, 0.8);

    box-shadow:
        0 0 35px rgba(95, 68, 220, 0.25);
}

.info-icon {
    min-width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.15);
}

.info-card h3 {
    margin-bottom: 12px;
    font-size: 22px;
}

.info-card p {
    color: #b6b4c2;
    line-height: 1.7;
    margin-bottom: 10px;
}


/* ========================================
   SOCIAL / SIGNAL CENTER
======================================== */

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.social-card {
    text-decoration: none;
    color: white;

    padding: 35px 20px;
    text-align: center;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 0 30px rgba(44, 30, 105, 0.2);

    transition: 0.3s ease;
}

.social-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(150, 130, 255, 0.8);

    box-shadow:
        0 0 35px rgba(95, 68, 220, 0.25);
}

.social-icon {
    width: 70px;
    height: 70px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.15);
}

.social-card h3 {
    margin-top: 22px;
    font-size: 22px;
}

.social-card p {
    margin-top: 10px;
    color: #aeadbb;
}


/* ========================================
   MEMORIES / GALLERY
======================================== */

.gallery-intro {
    max-width: 900px;
    margin: 0 auto 50px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);
}

.gallery-intro-icon {
    min-width: 75px;
    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 35px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.15);

    border:
        1px solid rgba(140, 117, 255, 0.25);
}

.gallery-intro h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

.gallery-intro p {
    color: #b9b7c5;
    line-height: 1.8;
}


/* GALLERY GRID */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* MEMORY CARD */

.memory-card {
    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.9),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.memory-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(150, 130, 255, 0.8);

    box-shadow:
        0 15px 45px rgba(82, 56, 200, 0.25);
}


/* MEMORY IMAGE */

.memory-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
}

.memory-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    transition:
        transform 0.5s ease;
}

.memory-card:hover .memory-image img {
    transform: scale(1.08);
}


/* EMPTY MEMORY */

.empty-memory {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    background:
        radial-gradient(
            circle at center,
            rgba(102, 77, 205, 0.3),
            rgba(14, 15, 31, 0.95)
        );
}

.empty-memory span {
    font-size: 50px;

    filter:
        drop-shadow(
            0 0 15px rgba(140, 115, 255, 0.6)
        );
}

.empty-memory p {
    color: #bcb8d0;
    font-size: 14px;
    letter-spacing: 1px;
}


/* MEMORY INFORMATION */

.memory-info {
    padding: 25px;
}

.memory-number {
    display: inline-block;

    color: #9684ff;
    font-size: 11px;
    letter-spacing: 3px;

    margin-bottom: 12px;
}

.memory-info h3 {
    font-size: 23px;
    margin-bottom: 12px;
}

.memory-info p {
    color: #aaa8b8;
    line-height: 1.7;
    font-size: 15px;
}


/* GALLERY FOOTER */

.gallery-footer-text {
    text-align: center;
    margin-top: 55px;

    color: #a6a1bc;
    letter-spacing: 2px;
}

.gallery-footer-text span {
    font-size: 28px;
    color: #927cff;
    margin-right: 10px;
}


/* ========================================
   MIND ARCHIVE / JOURNAL
======================================== */

.journal-intro {
    max-width: 900px;
    margin: 0 auto 50px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);
}

.journal-intro-icon {
    min-width: 75px;
    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 35px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.15);

    border:
        1px solid rgba(140, 117, 255, 0.25);
}

.journal-intro h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

.journal-intro p {
    color: #b9b7c5;
    line-height: 1.8;
}


/* JOURNAL GRID */

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* JOURNAL CARD */

.journal-card {
    padding: 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.9),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.journal-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(150, 130, 255, 0.8);

    box-shadow:
        0 15px 45px rgba(82, 56, 200, 0.25);
}


/* JOURNAL CARD TOP */

.journal-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.journal-category {
    color: #9b87ff;
    font-size: 11px;
    letter-spacing: 2px;

    padding: 7px 10px;
    border-radius: 20px;

    background:
        rgba(115, 92, 255, 0.12);
}

.journal-date {
    color: #898795;
    font-size: 10px;
    letter-spacing: 1px;
}


/* JOURNAL ICON */

.journal-icon {
    width: 65px;
    height: 65px;

    margin: 30px 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.12);
}


/* JOURNAL TEXT */

.journal-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.journal-card p {
    color: #aaa8b8;
    line-height: 1.8;
    font-size: 15px;
    min-height: 105px;
}


/* READ MORE BUTTON */

.read-more-btn {
    margin-top: 25px;
    padding: 11px 18px;

    color: #c8c1ff;

    background:
        rgba(100, 75, 220, 0.12);

    border:
        1px solid rgba(140, 117, 255, 0.35);

    border-radius: 30px;

    cursor: pointer;

    transition: 0.3s ease;
}

.read-more-btn:hover {
    transform: translateX(5px);

    color: white;

    background:
        rgba(112, 84, 255, 0.28);
}


/* JOURNAL FOOTER */

.journal-footer-text {
    margin-top: 55px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    color: #a6a1bc;
    letter-spacing: 1px;
}

.journal-footer-text span {
    font-size: 28px;
    color: #927cff;
}


/* ========================================
   INNOVATION LAB / PROJECTS
======================================== */

.innovation-intro {
    max-width: 900px;
    margin: 0 auto 50px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);
}

.innovation-intro-icon {
    min-width: 75px;
    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 35px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.15);

    border:
        1px solid rgba(140, 117, 255, 0.25);
}

.innovation-intro h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

.innovation-intro p {
    color: #b9b7c5;
    line-height: 1.8;
}


/* PROJECTS GRID */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* PROJECT CARD */

.project-card {
    padding: 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.9),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.project-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(150, 130, 255, 0.8);

    box-shadow:
        0 15px 45px rgba(82, 56, 200, 0.25);
}


/* PROJECT TOP */

.project-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;
}

.project-status {
    font-size: 10px;
    letter-spacing: 2px;

    padding: 7px 10px;
    border-radius: 20px;
}

.active-status {
    color: #9bffbf;
    background: rgba(70, 200, 120, 0.12);
}

.building-status {
    color: #ffd28a;
    background: rgba(255, 170, 60, 0.12);
}

.future-status {
    color: #9b87ff;
    background: rgba(115, 92, 255, 0.12);
}

.project-number {
    color: #898795;
    font-size: 10px;
    letter-spacing: 1px;
}


/* PROJECT ICON */

.project-icon {
    width: 65px;
    height: 65px;

    margin: 30px 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.12);
}


/* PROJECT TEXT */

.project-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.project-card p {
    color: #aaa8b8;
    line-height: 1.8;
    font-size: 15px;
    min-height: 110px;
}


/* PROJECT TAGS */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.project-tags span {
    padding: 7px 11px;

    border-radius: 20px;

    font-size: 11px;
    color: #bdb5ff;

    background:
        rgba(115, 92, 255, 0.1);

    border:
        1px solid rgba(125, 105, 255, 0.2);
}


/* PROJECT BUTTON */

.project-btn {
    margin-top: 25px;
    padding: 11px 18px;

    color: #c8c1ff;

    background:
        rgba(100, 75, 220, 0.12);

    border:
        1px solid rgba(140, 117, 255, 0.35);

    border-radius: 30px;

    cursor: pointer;

    transition: 0.3s ease;
}

.project-btn:hover {
    transform: translateX(5px);

    color: white;

    background:
        rgba(112, 84, 255, 0.28);
}


/* INNOVATION FOOTER */

.innovation-footer-text {
    margin-top: 55px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    color: #a6a1bc;
    letter-spacing: 1px;
}

.innovation-footer-text span {
    font-size: 28px;
    color: #927cff;
}


/* ========================================
   CONTACT
======================================== */

.contact-card {
    max-width: 700px;
    margin: auto;

    text-align: center;

    padding: 55px 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.9)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 0 30px rgba(44, 30, 105, 0.2);
}

.big-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.contact-card h3 {
    font-size: 30px;
    margin-bottom: 15px;
}

.contact-card p {
    color: #b9b7c5;
    line-height: 1.8;
    margin-bottom: 25px;
}


/* CONTACT BUTTONS */

.contact-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;
    margin-top: 25px;
}

.contact-buttons .main-button,
.email-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 230px;
    padding: 18px 30px;

    border:
        1px solid rgba(130, 110, 255, 0.85);

    border-radius: 50px;

    color: #ffffff;
    text-decoration: none;

    font-size: 17px;
    font-weight: 600;

    background:
        rgba(100, 80, 190, 0.16);

    box-shadow:
        0 0 15px rgba(110, 90, 255, 0.20),
        inset 0 0 20px rgba(110, 90, 255, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contact-buttons .main-button:hover,
.email-button:hover {
    transform: translateY(-4px);

    background:
        rgba(105, 80, 220, 0.28);

    box-shadow:
        0 0 18px rgba(140, 120, 255, 0.55),
        0 0 40px rgba(110, 85, 255, 0.35),
        0 15px 45px rgba(88, 64, 220, 0.35);
}


/* ========================================
   FOOTER
======================================== */

footer {
    text-align: center;

    padding: 70px 20px 40px;

    border-top:
        1px solid rgba(137, 116, 255, 0.15);

    background:
        rgba(4, 5, 15, 0.6);
}

.footer-logo {
    width: 58px;
    height: 58px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.footer-logo img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;
}

footer h3 {
    font-size: 28px;
    letter-spacing: 4px;
}

footer p {
    margin-top: 10px;
    color: #9e9baa;
}

.copyright {
    margin-top: 30px;
    font-size: 13px;
}


/* ========================================
   GATEWAY PAGE
======================================== */

.gateway-page {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
}

.gateway {
    min-height: 100vh;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;
}

.gateway-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(105, 76, 255, 0.22),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(65, 50, 160, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #080812,
            #111126,
            #090914
        );
}

.gateway-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 800px;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 40px 25px;

    animation:
        gatewayFade 1.2s ease;
}

@keyframes gatewayFade {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* GATEWAY LOGO */

.gateway-logo {
    width: 150px;
    height: 150px;

    margin: 0 auto 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.gateway-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}


/* GATEWAY TEXT */

.gateway-small-text {
    width: 100%;

    color: #9d91e8;
    font-size: 12px;
    letter-spacing: 6px;

    text-align: center;

    margin: 0 0 15px;
}

.gateway-content h1 {
    width: 100%;

    margin: 0;

    text-align: center;

    font-size: clamp(50px, 8vw, 95px);
    letter-spacing: -2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #b9adff,
            #ffffff
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gateway-description {
    width: 100%;
    max-width: 550px;

    margin: 25px auto 40px;

    color: #aaa8bb;

    text-align: center;
    line-height: 1.8;
    font-size: 16px;
}

.gateway-description strong {
    color: #d2ccff;
}


/* ENTER BUTTON */

.enter-universe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    padding: 16px 28px;

    border-radius: 50px;

    color: white;
    text-decoration: none;
    font-size: 15px;

    background:
        linear-gradient(
            135deg,
            #725cff,
            #4935bd
        );

    box-shadow:
        0 10px 35px rgba(88, 64, 220, 0.35);

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

.enter-universe-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 45px rgba(88, 64, 220, 0.55);
}

.enter-universe-btn span {
    font-size: 22px;
}


/* GATEWAY FOOTER */

.gateway-footer {
    width: 100%;

    margin: 45px 0 0;

    color: #777486;

    text-align: center;

    font-size: 11px;
    letter-spacing: 2px;
}


/* ========================================
   ANIMATION
======================================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   TABLET RESPONSIVE
======================================== */

@media (max-width: 1000px) {

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

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .navbar {
        flex-direction: column;
        gap: 15px;
    }
}


/* ========================================
   MOBILE RESPONSIVE
======================================== */

@media (max-width: 600px) {

    .navbar {
        padding: 12px 15px;
    }

    .nav-logo h2 {
        font-size: 18px;
    }

    .nav-logo-image {
        width: 42px;
        height: 42px;
    }

    .navbar nav {
        gap: 10px;
    }

    .navbar nav a {
        font-size: 11px;
    }

    .section {
        padding: 90px 18px;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title p {
        font-size: 15px;
    }

    .identity-card {
        padding: 30px 22px;
    }

    .profile-image-box {
        width: 150px;
        height: 150px;
    }

    .main-identity-card h3 {
        font-size: 24px;
    }

    .info-card {
        padding: 22px;
        flex-direction: column;
    }

    .social-grid,
    .gallery-grid,
    .journal-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .gallery-intro,
    .journal-intro,
    .innovation-intro {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .memory-image {
        height: 250px;
    }

    .journal-card p,
    .project-card p {
        min-height: auto;
    }

    .contact-card {
        padding: 45px 20px;
    }

    .contact-buttons {
        flex-direction: column;
        width: 100%;
    }

    .contact-buttons .main-button,
    .email-button {
        width: min(280px, 100%);
        min-width: 0;
    }

    .footer-logo {
        width: 48px;
        height: 48px;
    }

    .gateway-logo {
        width: 110px;
        height: 110px;
    }

    .gateway-content {
        padding: 30px 20px;
    }

    .gateway-small-text {
        letter-spacing: 4px;
    }

    .gateway-description {
        font-size: 14px;
    }
}/* ========================================
   MAAMVERSE
   JAVASCRIPT EFFECTS
======================================== */


/* ========================================
   ACTIVE NAVIGATION
======================================== */

.navbar nav a.active {
    color: #ffffff;
    text-shadow:
        0 0 15px #9b7cff,
        0 0 30px rgba(155, 124, 255, 0.5);
}


/* ========================================
   SCROLL REVEAL
======================================== */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.reveal.show {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   STAGGER EFFECT
======================================== */

.social-card:nth-child(2),
.memory-card:nth-child(2),
.journal-card:nth-child(2),
.project-card:nth-child(2) {
    transition-delay: 0.1s;
}


.social-card:nth-child(3),
.memory-card:nth-child(3),
.journal-card:nth-child(3),
.project-card:nth-child(3) {
    transition-delay: 0.2s;
}


.social-card:nth-child(4),
.memory-card:nth-child(4) {
    transition-delay: 0.3s;
}


.memory-card:nth-child(5) {
    transition-delay: 0.4s;
}


.memory-card:nth-child(6) {
    transition-delay: 0.5s;
}


/* ========================================
   BUTTON IMPROVEMENT
======================================== */

.read-more-btn,
.project-btn {
    font-family: inherit;
}


.read-more-btn:active,
.project-btn:active,
.main-button:active,
.email-button:active {
    transform: scale(0.97);
}


/* ========================================
   ACCESSIBILITY
======================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}/* ========================================
   MAAMVERSE JOURNAL ARTICLE PAGE
======================================== */


/* ARTICLE PAGE */

.article-page {
    min-height: 100vh;
}


/* ARTICLE NAVBAR */

.article-navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 6%;

    background:
        rgba(5, 6, 20, 0.82);

    backdrop-filter: blur(15px);

    border-bottom:
        1px solid rgba(151, 125, 255, 0.20);

    position: sticky;
    top: 0;
    z-index: 1000;
}


.article-back-btn {
    display: inline-flex;
    align-items: center;

    padding: 11px 18px;

    border-radius: 30px;

    color: #cfc9ff;
    text-decoration: none;

    font-size: 14px;

    background:
        rgba(100, 75, 220, 0.10);

    border:
        1px solid rgba(140, 117, 255, 0.30);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.article-back-btn:hover {
    transform: translateX(-4px);

    background:
        rgba(105, 80, 220, 0.22);

    box-shadow:
        0 0 25px rgba(110, 85, 255, 0.20);
}


/* ARTICLE BRAND */

.article-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: white;
    text-decoration: none;
}


.article-brand img {
    width: 45px;
    height: 45px;

    object-fit: contain;
}


.article-brand span {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}


/* MAIN */

.article-main {
    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    padding:
        100px 25px 80px;
}


/* ARTICLE HEADER */

.article-header {
    max-width: 850px;

    margin:
        0 auto 60px;

    text-align: center;
}


.article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    margin-bottom: 30px;
}


.article-category {
    padding:
        8px 14px;

    border-radius: 30px;

    color: #a997ff;

    font-size: 11px;
    letter-spacing: 2px;

    background:
        rgba(115, 92, 255, 0.12);

    border:
        1px solid rgba(125, 105, 255, 0.25);
}


.article-date {
    color: #898795;

    font-size: 11px;
    letter-spacing: 1px;
}


/* ARTICLE ICON */

.article-main-icon {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0 auto 30px;

    font-size: 42px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.12);

    border:
        1px solid rgba(125, 105, 255, 0.22);

    box-shadow:
        0 0 35px rgba(95, 68, 220, 0.18);
}


/* ARTICLE TITLE */

.article-header h1 {
    font-size:
        clamp(42px, 7vw, 75px);

    line-height: 1.1;

    margin-bottom: 25px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #b7a6ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.article-subtitle {
    max-width: 700px;

    margin: auto;

    color: #aaa8b8;

    font-size: 18px;
    line-height: 1.9;
}


/* ARTICLE CONTENT */

.article-content {
    max-width: 800px;

    margin: auto;

    padding: 55px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.88),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.20);
}


.article-content p {
    color: #b8b6c5;

    font-size: 17px;
    line-height: 2;

    margin-bottom: 25px;
}


.article-content h2 {
    margin:
        50px 0 22px;

    font-size: 30px;

    color: #e2def8;
}


/* ARTICLE QUOTE */

.article-quote {
    position: relative;

    margin:
        45px 0;

    padding:
        35px 35px 30px;

    text-align: center;

    border-radius: 20px;

    background:
        rgba(105, 80, 220, 0.08);

    border:
        1px solid rgba(140, 117, 255, 0.20);
}


.article-quote span {
    display: block;

    margin-bottom: -20px;

    font-size: 70px;

    color: #907aff;
}


.article-quote p {
    margin: 0;

    color: #d2cbff;

    font-size: 20px;
    font-style: italic;
}


/* ARTICLE ENDING */

.article-ending {
    margin-top: 50px;

    padding-top: 35px;

    text-align: center;

    border-top:
        1px solid rgba(140, 117, 255, 0.15);
}


.article-ending span {
    font-size: 32px;

    color: #927cff;
}


.article-ending p {
    margin-top: 10px;
    margin-bottom: 0;

    color: #a8a3bb;
}


/* ACTIONS */

.article-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 45px;
}


.article-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 210px;

    padding:
        15px 24px;

    border-radius: 50px;

    color: white;
    text-decoration: none;

    background:
        rgba(105, 80, 220, 0.18);

    border:
        1px solid rgba(140, 117, 255, 0.40);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.article-action-btn:hover {
    transform: translateY(-4px);

    background:
        rgba(105, 80, 220, 0.30);

    box-shadow:
        0 15px 40px rgba(88, 64, 220, 0.25);
}


.secondary-action {
    background:
        rgba(100, 100, 150, 0.08);
}


/* ARTICLE FOOTER */

.article-footer {
    margin-top: 40px;
}


.article-footer img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}


/* MOBILE */

@media (max-width: 700px) {

    .article-navbar {
        padding:
            14px 20px;
    }


    .article-back-btn {
        padding:
            9px 13px;

        font-size: 12px;
    }


    .article-brand span {
        display: none;
    }


    .article-main {
        padding:
            70px 18px 60px;
    }


    .article-header {
        margin-bottom: 40px;
    }


    .article-content {
        padding:
            30px 22px;

        border-radius: 22px;
    }


    .article-content p {
        font-size: 16px;
        line-height: 1.9;
    }


    .article-content h2 {
        margin:
            40px 0 18px;

        font-size: 25px;
    }


    .article-quote {
        padding:
            28px 20px;
    }


    .article-quote p {
        font-size: 17px;
    }


    .article-actions {
        flex-direction: column;
        align-items: center;
    }


    .article-action-btn {
        width: 100%;
        max-width: 330px;
    }

}/* ========================================
   MEMORY SINGLE PAGE
======================================== */

.memory-page {
    max-width: 1000px;
}


/* BACK BUTTON */

.back-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    margin-bottom: 60px;
    border-radius: 30px;
    color: #c8c1ff;
    text-decoration: none;
    background: rgba(100, 75, 220, 0.12);
    border: 1px solid rgba(140, 117, 255, 0.35);
    transition: 0.3s ease;
}

.back-button:hover {
    transform: translateX(-5px);
    color: white;
    background: rgba(112, 84, 255, 0.28);
}


/* MEMORY HEADER */

.memory-page-header {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

.memory-page-number {
    display: inline-block;
    margin-bottom: 18px;
    color: #9684ff;
    font-size: 13px;
    letter-spacing: 5px;
}

.memory-page-header h1 {
    font-size: clamp(45px, 7vw, 75px);
    margin-bottom: 22px;
    background: linear-gradient(
        90deg,
        #ffffff,
        #9e8aff
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.memory-page-header p {
    max-width: 650px;
    margin: auto;
    color: #aaa8b8;
    font-size: 17px;
    line-height: 1.9;
}


/* MAIN IMAGE */

.memory-main-image {
    width: 100%;
    max-width: 900px;
    height: 500px;
    margin: 0 auto 60px;
    overflow: hidden;
    border-radius: 25px;
    border: 1px solid rgba(125, 105, 255, 0.3);
    background: rgba(20, 18, 40, 0.6);
    box-shadow:
        0 20px 60px rgba(55, 35, 160, 0.25);
}

.memory-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


/* STORY */

.memory-story {
    max-width: 800px;
    margin: auto;
    padding: 45px;
    border-radius: 25px;
    background: linear-gradient(
        135deg,
        rgba(31, 34, 58, 0.85),
        rgba(16, 16, 34, 0.9)
    );
    border: 1px solid rgba(125, 105, 255, 0.28);
}

.story-label {
    margin-bottom: 15px;
    color: #9684ff;
    font-size: 12px;
    letter-spacing: 4px;
}

.memory-story h2 {
    margin-bottom: 30px;
    font-size: 35px;
}

.memory-story p {
    margin-bottom: 22px;
    color: #b9b7c5;
    font-size: 17px;
    line-height: 2;
}

.memory-story blockquote {
    margin: 35px 0;
    padding: 25px 30px;
    border-left: 3px solid #8d75ff;
    border-radius: 0 15px 15px 0;
    background: rgba(115, 92, 255, 0.08);
    color: #d7d1ff;
    font-size: 20px;
    line-height: 1.7;
}


/* MEMORY DETAILS */

.memory-details-box {
    max-width: 800px;
    margin: 35px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.memory-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(115, 92, 255, 0.08);
    border: 1px solid rgba(125, 105, 255, 0.2);
}

.memory-detail-item > span {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 20px;
    background: rgba(115, 92, 255, 0.15);
}

.memory-detail-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.memory-detail-item small {
    color: #777486;
    font-size: 9px;
    letter-spacing: 2px;
}

.memory-detail-item strong {
    color: #ddd9f4;
    font-size: 13px;
    font-weight: 500;
}


/* MEMORY NAVIGATION */

.memory-navigation {
    max-width: 800px;
    margin: 55px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.memory-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border-radius: 30px;
    color: #c8c1ff;
    text-decoration: none;
    background: rgba(100, 75, 220, 0.12);
    border: 1px solid rgba(140, 117, 255, 0.35);
    transition: 0.3s ease;
}

.memory-nav-button:hover {
    transform: translateY(-4px);
    color: white;
    background: rgba(112, 84, 255, 0.28);
}

.disabled-button {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .memory-main-image {
        height: 300px;
    }

    .memory-story {
        padding: 28px 22px;
    }

    .memory-story h2 {
        font-size: 28px;
    }

    .memory-story p {
        font-size: 16px;
    }

    .memory-story blockquote {
        padding: 20px;
        font-size: 17px;
    }

    .memory-details-box {
        grid-template-columns: 1fr;
    }

    .memory-navigation {
        flex-direction: column;
    }

}/* ========================================
   MAAMVERSE LOGO - FINAL FIXED SIZES
======================================== */

/* GATEWAY MAIN LOGO */

.gateway-logo {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;

    margin: 0 auto 35px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
}

.gateway-logo img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    display: block !important;
}


/* NAVBAR LOGO */

.nav-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
}

.nav-logo img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    display: block !important;
}


/* FOOTER LOGO */

.footer-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 auto 14px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
}

.footer-logo img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    display: block !important;
}


/* MOBILE LOGO SIZES */

@media (max-width: 600px) {

    .gateway-logo {
        width: 110px !important;
        height: 110px !important;
        min-width: 110px !important;
        min-height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
    }

    .nav-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .footer-logo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

}/* =========================
   GALLERY FIXED MEMORY ICONS
========================= */

.empty-memory {
    min-height: 360px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 18px;

    background: linear-gradient(
        135deg,
        rgba(55, 54, 95, 0.9),
        rgba(20, 20, 45, 0.95)
    );

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


.empty-memory span {
    font-size: 70px;

    line-height: 1;

    filter:
        drop-shadow(0 0 15px rgba(255, 200, 100, 0.35));
}


.empty-memory p {
    margin: 0;

    font-size: 20px;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.7);
}


/* MOBILE */

@media (max-width: 768px) {

    .empty-memory {
        min-height: 260px;
    }


    .empty-memory span {
        font-size: 58px;
    }


    .empty-memory p {
        font-size: 17px;
    }

}/* ========================================
   JOURNAL INNER PAGES
======================================== */

.journal-page {
    min-height: 100vh;
}


.journal-article-section {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 80px 25px 100px;
}


/* BACK BUTTON */

.back-archive {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 50px;

    padding: 12px 20px;

    color: #c8c1ff;
    text-decoration: none;

    border-radius: 30px;

    background:
        rgba(100, 75, 220, 0.12);

    border:
        1px solid rgba(140, 117, 255, 0.35);

    transition: 0.3s;
}


.back-archive:hover {
    transform: translateX(-5px);

    color: white;

    background:
        rgba(112, 84, 255, 0.28);
}


/* ARTICLE HEADER */

.journal-article-header {
    text-align: center;

    padding: 55px 30px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.88),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 15px 50px rgba(50, 35, 150, 0.15);
}


.journal-article-category {
    display: inline-block;

    padding: 8px 15px;

    border-radius: 25px;

    color: #a997ff;

    font-size: 11px;

    letter-spacing: 3px;

    background:
        rgba(115, 92, 255, 0.12);

    border:
        1px solid rgba(140, 117, 255, 0.2);
}


.journal-article-icon {
    width: 95px;
    height: 95px;

    margin: 30px auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 45px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.12);

    box-shadow:
        0 0 30px rgba(100, 75, 220, 0.12);
}


.journal-article-number {
    color: #898795;

    font-size: 11px;

    letter-spacing: 3px;
}


.journal-article-header h1 {
    max-width: 750px;

    margin: 20px auto;

    font-size: clamp(38px, 6vw, 70px);

    line-height: 1.15;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #b9adff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.journal-article-subtitle {
    max-width: 650px;

    margin: 0 auto;

    color: #aaa8b8;

    line-height: 1.8;

    font-size: 17px;
}


/* ARTICLE CONTENT */

.journal-article-content {
    margin-top: 35px;

    padding: 50px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(22, 23, 42, 0.85),
            rgba(10, 11, 25, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.18);
}


.journal-article-content p {
    margin-bottom: 25px;

    color: #c0beca;

    font-size: 17px;

    line-height: 2;
}


.journal-article-content p:last-child {
    margin-bottom: 0;
}


.journal-highlight {
    margin: 40px 0;

    padding: 25px 30px;

    border-left:
        3px solid #8f79ff;

    border-radius: 0 18px 18px 0;

    background:
        rgba(100, 75, 220, 0.08);

    color: #d7d1ff;

    font-size: 20px;

    line-height: 1.8;
}


/* JOURNAL NAVIGATION */

.journal-navigation {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 40px;
}


.journal-navigation a {
    flex: 1;

    padding: 18px 22px;

    color: #c8c1ff;

    text-decoration: none;

    border-radius: 18px;

    background:
        rgba(100, 75, 220, 0.08);

    border:
        1px solid rgba(140, 117, 255, 0.22);

    transition: 0.3s;
}


.journal-navigation a:hover {
    transform: translateY(-4px);

    color: white;

    background:
        rgba(112, 84, 255, 0.18);

    border-color:
        rgba(150, 130, 255, 0.55);
}


.journal-navigation .next-journal {
    text-align: right;
}


/* MOBILE */

@media (max-width: 600px) {

    .journal-article-section {
        padding: 50px 18px 80px;
    }


    .back-archive {
        margin-bottom: 30px;
    }


    .journal-article-header {
        padding: 40px 20px;
    }


    .journal-article-content {
        padding: 30px 22px;
    }


    .journal-article-content p {
        font-size: 16px;
        line-height: 1.9;
    }


    .journal-highlight {
        padding: 20px;
        font-size: 17px;
    }


    .journal-navigation {
        flex-direction: column;
    }


    .journal-navigation .next-journal {
        text-align: left;
    }

}/* ========================================
   FINAL NAV LOGO FIX
======================================== */

.nav-logo {
    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    overflow: visible !important;
}


.nav-logo img,
.nav-logo-image {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    max-width: 48px !important;
    max-height: 48px !important;

    flex: 0 0 48px !important;

    object-fit: contain !important;
    display: block !important;
}


.nav-logo h2 {
    display: block !important;

    width: auto !important;

    white-space: nowrap !important;

    overflow: visible !important;
}


@media (max-width: 600px) {

    .nav-logo img,
    .nav-logo-image {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        max-width: 42px !important;
        max-height: 42px !important;

        flex-basis: 42px !important;
    }

}/* PROJECT LINK FIX */

a.project-btn {
    display: inline-block;
    text-decoration: none;
}/* ========================================
   MAAMVERSE
   PROJECT DETAIL PAGES
======================================== */


/* ========================================
   PROJECT PAGE
======================================== */

.project-page {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


/* ========================================
   PROJECT HEADER
======================================== */

.project-page-header {
    max-width: 900px;
    margin: 0 auto 60px;

    padding: 55px 35px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.90),
            rgba(13, 14, 29, 0.96)
        );

    border:
        1px solid rgba(125, 105, 255, 0.28);

    box-shadow:
        0 20px 60px rgba(30, 20, 100, 0.20);
}


/* PROJECT NUMBER */

.project-page-number {
    display: inline-block;

    margin-bottom: 25px;

    color: #9684ff;

    font-size: 12px;
    letter-spacing: 5px;
}


/* PROJECT ICON */

.project-page-icon {
    width: 95px;
    height: 95px;

    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;

    border-radius: 50%;

    background:
        rgba(115, 92, 255, 0.14);

    border:
        1px solid rgba(140, 117, 255, 0.28);

    box-shadow:
        0 0 35px rgba(100, 75, 220, 0.20);
}


/* PROJECT TITLE */

.project-page-header h1 {
    margin-bottom: 22px;

    font-size:
        clamp(45px, 7vw, 78px);

    line-height: 1.1;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #ad9cff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* PROJECT DESCRIPTION */

.project-page-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #b5b2c2;

    font-size: 17px;
    line-height: 1.9;
}


/* PROJECT STATUS */

.project-page-status {
    display: inline-block;

    margin-top: 30px;

    padding: 9px 16px;

    border-radius: 30px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    border:
        1px solid rgba(120, 255, 170, 0.20);
}


/* ========================================
   PROJECT STORY / INFORMATION BLOCK
======================================== */

.project-story {
    max-width: 850px;

    margin: 0 auto 35px;

    padding: 45px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.85),
            rgba(16, 16, 34, 0.92)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.12);
}


.project-story h2 {
    margin-bottom: 25px;

    font-size: 34px;

    color: #f1efff;
}


.project-story p {
    margin-bottom: 22px;

    color: #b9b7c5;

    font-size: 17px;

    line-height: 2;
}


.project-story p:last-child {
    margin-bottom: 0;
}


/* PROJECT QUOTE */

.project-story blockquote {
    margin: 35px 0;

    padding: 26px 30px;

    border-left:
        3px solid #8d75ff;

    border-radius:
        0 16px 16px 0;

    background:
        rgba(115, 92, 255, 0.08);

    color: #d8d2ff;

    font-size: 20px;

    line-height: 1.8;
}


/* ========================================
   TECHNOLOGY SECTION
======================================== */

.project-tech-section {
    max-width: 900px;

    margin: 55px auto;

    text-align: center;
}


.project-tech-section h2 {
    margin: 12px 0 35px;

    font-size: 36px;
}


/* TECHNOLOGY GRID */

.project-tech-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


/* TECHNOLOGY CARD */

.project-tech-card {
    padding: 35px 25px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(31, 34, 58, 0.88),
            rgba(13, 14, 29, 0.95)
        );

    border:
        1px solid rgba(125, 105, 255, 0.25);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.project-tech-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(150, 130, 255, 0.75);

    box-shadow:
        0 15px 40px rgba(82, 56, 200, 0.20);
}


.project-tech-card > span {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 30px;

    background:
        rgba(115, 92, 255, 0.13);
}


.project-tech-card h3 {
    margin-bottom: 13px;

    font-size: 22px;
}


.project-tech-card p {
    color: #aaa8b8;

    font-size: 14px;

    line-height: 1.8;
}


/* ========================================
   PROJECT FEATURE LIST
======================================== */

.project-feature-list {
    margin-top: 35px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.project-feature-list > div {
    padding: 25px;

    border-radius: 18px;

    background:
        rgba(115, 92, 255, 0.07);

    border:
        1px solid rgba(125, 105, 255, 0.18);
}


.project-feature-list > div > span {
    display: block;

    margin-bottom: 12px;

    font-size: 28px;
}


.project-feature-list strong {
    display: block;

    margin-bottom: 8px;

    color: #e2def8;

    font-size: 17px;
}


.project-feature-list p {
    margin: 0;

    color: #a9a6b6;

    font-size: 14px;

    line-height: 1.7;
}


/* ========================================
   PROJECT DETAILS
======================================== */

.project-details-box {
    max-width: 850px;

    margin: 40px auto 55px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;
}


.project-detail-item {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 22px;

    border-radius: 18px;

    background:
        rgba(115, 92, 255, 0.08);

    border:
        1px solid rgba(125, 105, 255, 0.20);
}


.project-detail-item > span {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 21px;

    background:
        rgba(115, 92, 255, 0.15);
}


.project-detail-item div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.project-detail-item small {
    color: #777486;

    font-size: 9px;

    letter-spacing: 2px;
}


.project-detail-item strong {
    color: #ddd9f4;

    font-size: 13px;

    font-weight: 500;
}


/* ========================================
   PROJECT LINK BUTTON
======================================== */

a.project-btn {
    display: inline-block;

    text-decoration: none;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 900px) {

    .project-tech-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .project-details-box {
        grid-template-columns: 1fr;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .project-page-header {
        padding:
            40px 22px;
    }


    .project-page-header p {
        font-size: 15px;
    }


    .project-page-icon {
        width: 80px;
        height: 80px;

        font-size: 36px;
    }


    .project-story {
        padding:
            30px 22px;
    }


    .project-story h2 {
        font-size: 28px;
    }


    .project-story p {
        font-size: 16px;

        line-height: 1.9;
    }


    .project-story blockquote {
        padding:
            22px;

        font-size: 17px;
    }


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


    .project-feature-list {
        grid-template-columns: 1fr;
    }


    .project-tech-section h2 {
        font-size: 30px;
    }

}


/* ========================================
   END PROJECT DETAIL PAGES
======================================== */
/* ========================================
   MAAMVERSE GATEWAY VIDEO BACKGROUND
   FINAL
======================================== */


/* PAGE */

.gateway-page {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #02040b;
}


/* MAIN GATEWAY */

.gateway {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #02040b,
            #071020,
            #030510
        );
}


/* ========================================
   VIDEO
======================================== */

.gateway-video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    transform:
        translate(-50%, -50%)
        scale(1.02);

    object-fit: cover;

    z-index: -3;

    pointer-events: none;
}


/* ========================================
   CINEMATIC DARK OVERLAY
======================================== */

.gateway-video-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            rgba(2, 5, 15, 0.18) 0%,
            rgba(2, 5, 15, 0.30) 45%,
            rgba(1, 3, 10, 0.58) 100%
        ),

        linear-gradient(
            180deg,
            rgba(1, 3, 10, 0.20) 0%,
            rgba(2, 4, 14, 0.30) 55%,
            rgba(1, 2, 8, 0.60) 100%
        );
}


/* SUBTLE VIGNETTE */

.gateway::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    box-shadow:
        inset 0 0 180px
        rgba(0, 0, 0, 0.65);
}


/* ========================================
   CONTENT
======================================== */

.gateway-content {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 850px;

    min-height: 100vh;

    padding:
        45px 25px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ========================================
   LOGO
======================================== */

.gateway-logo {
    width: 165px !important;
    height: 165px !important;

    margin:
        0 auto 28px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    filter:
        drop-shadow(
            0 0 18px
            rgba(53, 132, 255, 0.35)
        );
}


.gateway-logo img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: contain;
}


/* ========================================
   SMALL HEADING
======================================== */

.gateway-small-text {
    margin:
        0 0 14px !important;

    color: #9fc9ff !important;

    font-size: 12px !important;
    font-weight: 600;

    letter-spacing: 7px !important;

    text-shadow:
        0 0 15px
        rgba(65, 155, 255, 0.65);
}


/* ========================================
   MAAMVERSE TITLE
======================================== */

.gateway-content h1 {
    margin: 0 !important;

    font-size:
        clamp(
            55px,
            9vw,
            100px
        ) !important;

    font-weight: 800;

    letter-spacing: -2px;

    line-height: 1;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #a9d7ff 30%,
            #69b8ff 50%,
            #d8eaff 70%,
            #ffffff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 45px
        rgba(68, 137, 255, 0.18);
}


/* ========================================
   DESCRIPTION
======================================== */

.gateway-description {
    width: 100%;

    max-width: 590px !important;

    margin:
        25px auto 35px !important;

    color:
        rgba(
            232,
            240,
            255,
            0.82
        ) !important;

    font-size: 16px !important;

    line-height: 1.8 !important;

    text-shadow:
        0 2px 15px
        rgba(0, 0, 0, 0.7);
}


/* ========================================
   ENTER BUTTON
======================================== */

.enter-universe-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 14px;

    padding:
        16px 30px !important;

    border:
        1px solid
        rgba(
            111,
            181,
            255,
            0.55
        );

    border-radius:
        50px;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        0.4px;

    background:
        linear-gradient(
            135deg,
            rgba(
                31,
                117,
                255,
                0.85
            ),
            rgba(
                75,
                54,
                210,
                0.85
            )
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:

        0 0 20px
        rgba(
            55,
            132,
            255,
            0.22
        ),

        0 15px 45px
        rgba(
            0,
            0,
            0,
            0.35
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.enter-universe-btn:hover {
    transform:
        translateY(-4px)
        scale(1.02);

    border-color:
        rgba(
            150,
            207,
            255,
            0.9
        );

    box-shadow:

        0 0 30px
        rgba(
            59,
            145,
            255,
            0.45
        ),

        0 18px 55px
        rgba(
            0,
            0,
            0,
            0.40
        );
}


.enter-universe-btn span {
    font-size:
        21px;

    transition:
        transform
        0.3s ease;
}


.enter-universe-btn:hover span {
    transform:
        translateX(5px);
}


/* ========================================
   FOOTER
======================================== */

.gateway-footer {
    margin:
        40px 0 0 !important;

    color:
        rgba(
            205,
            220,
            245,
            0.55
        ) !important;

    font-size:
        10px !important;

    letter-spacing:
        2.5px !important;

    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.8);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

    .gateway-content {
        padding:
            30px 20px;
    }


    .gateway-logo {
        width:
            120px !important;

        height:
            120px !important;

        margin-bottom:
            24px !important;
    }


    .gateway-small-text {
        font-size:
            10px !important;

        letter-spacing:
            4px !important;
    }


    .gateway-content h1 {
        font-size:
            clamp(
                48px,
                16vw,
                72px
            ) !important;
    }


    .gateway-description {
        max-width:
            420px !important;

        margin:
            20px auto 30px !important;

        font-size:
            14px !important;

        line-height:
            1.7 !important;
    }


    .enter-universe-btn {
        padding:
            14px 25px !important;

        font-size:
            14px;
    }


    .gateway-footer {
        margin-top:
            32px !important;

        font-size:
            9px !important;

        letter-spacing:
            1.8px !important;
    }

}/* FINAL GATEWAY POSITION FIX */

.gateway-content {
    min-height: 100vh;
    padding: 25px 20px !important;
    justify-content: center !important;
}

.gateway-logo {
    width: 135px !important;
    height: 135px !important;
    margin: 0 auto 20px !important;
}

.gateway-content h1 {
    font-size: clamp(52px, 8vw, 88px) !important;
}

.gateway-description {
    margin: 20px auto 30px !important;
}

.gateway-footer {
    margin-top: 28px !important;
}/* ========================================
   MAAMVERSE MOBILE - FINAL EDGE TO EDGE
======================================== */

@media (max-width: 768px) {

    html {
        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background: #02040b !important;

        overflow: hidden !important;
    }


    body.gateway-page {
        position: fixed !important;

        inset: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background: #02040b !important;

        overflow: hidden !important;
    }


    /* FULL MOBILE VIEWPORT */

    .gateway {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: hidden !important;

        background: #02040b !important;

        isolation: isolate !important;
    }


    /* VIDEO */

    .gateway-video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        display: block !important;

        z-index: 0 !important;

        pointer-events: none !important;
    }


    /* DARK OVERLAY */

    .gateway-video-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 1 !important;

        pointer-events: none !important;
    }


    /* REMOVE OLD VIGNETTE */

    .gateway::after {
        display: none !important;
    }


    /* CONTENT */

    .gateway-content {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 20px 18px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        overflow: hidden !important;
    }


    /* LOGO */

    .gateway-logo {
        width: 105px !important;
        height: 105px !important;

        min-width: 105px !important;
        min-height: 105px !important;

        max-width: 105px !important;
        max-height: 105px !important;

        margin: 0 auto 18px !important;
    }


    /* WELCOME */

    .gateway-small-text {
        margin: 0 0 14px !important;

        font-size: 10px !important;

        letter-spacing: 3.8px !important;
    }


    /* TITLE */

    .gateway-content h1 {
        margin: 0 !important;

        font-size:
            clamp(
                46px,
                14vw,
                66px
            ) !important;

        line-height: 1 !important;
    }


    /* DESCRIPTION */

    .gateway-description {
        width: 100% !important;
        max-width: 390px !important;

        margin: 20px auto 26px !important;

        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    /* BUTTON */

    .enter-universe-btn {
        padding: 14px 24px !important;

        font-size: 14px !important;
    }


    /* FOOTER */

    .gateway-footer {
        margin: 27px 0 0 !important;

        font-size: 8px !important;

        letter-spacing: 1.4px !important;
    }

}/* ========================================
   MOBILE SCROLL FIX
   Gateway stays fixed, other pages scroll
======================================== */

@media (max-width: 768px) {

    /* ALL NORMAL WEBSITE PAGES */

    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;

        height: auto !important;
        min-height: 100% !important;
    }


    body:not(.gateway-page) {
        position: static !important;

        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* ONLY GATEWAY PAGE */

    body.gateway-page {
        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }

}/* ========================================
   DYNAMIC MEMORY IMAGE
======================================== */

.dynamic-memory-card .memory-image {
    overflow: hidden;
}

.dynamic-memory-card .memory-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}/* ========================================
   DYNAMIC MEMORY PAGE
======================================== */

.dynamic-memory-page {
    min-height: 100vh;
    overflow-x: hidden;
}


.dynamic-memory-container {
    position: relative;
    z-index: 2;

    width: min(900px, calc(100% - 32px));

    margin: 0 auto;

    padding: 60px 0 90px;
}


.memory-back-btn {
    display: inline-flex;

    margin-bottom: 45px;

    padding: 11px 16px;

    border:
        1px solid
        rgba(111, 148, 255, 0.2);

    border-radius: 10px;

    background:
        rgba(10, 19, 45, 0.65);

    color: #b8c8f5;

    text-decoration: none;
}


.dynamic-memory-content {
    width: 100%;
}


.memory-page-header {
    margin-bottom: 40px;
}


.dynamic-memory-number,
.memory-section-label {
    margin: 0 0 12px;

    color: #7097ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;
}


.memory-page-header h1 {
    margin: 0;

    font-size:
        clamp(
            38px,
            8vw,
            68px
        );

    line-height: 1.05;
}


.dynamic-memory-description {
    max-width: 700px;

    margin: 20px 0 0;

    color: #aeb9d6;

    font-size: 17px;

    line-height: 1.7;
}


/* IMAGE */

.dynamic-memory-main-image {
    width: 100%;

    min-height: 420px;

    margin-bottom: 45px;

    border:
        1px solid
        rgba(114, 146, 230, 0.15);

    border-radius: 22px;

    overflow: hidden;

    background:
        rgba(8, 15, 35, 0.75);
}


.dynamic-memory-main-image img {
    width: 100%;
    height: 100%;

    min-height: 420px;

    display: block;

    object-fit: cover;
}


.dynamic-memory-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #7885a7;
}


.dynamic-memory-placeholder span {
    font-size: 48px;
}


.dynamic-memory-placeholder p {
    margin: 0;

    font-size: 15px;
}


/* STORY */

.memory-story {
    margin-bottom: 40px;

    padding: 34px;

    border:
        1px solid
        rgba(122, 150, 225, 0.12);

    border-radius: 20px;

    background:
        rgba(7, 13, 31, 0.72);
}


.memory-story h2 {
    margin:
        0 0
        25px;

    font-size: 27px;
}


.dynamic-memory-story-text p {
    margin:
        0 0
        20px;

    color: #c1c9df;

    font-size: 16px;

    line-height: 1.9;
}


.dynamic-memory-story-text p:last-child {
    margin-bottom: 0;
}


/* QUOTE */

.dynamic-memory-quote {
    margin:
        0 0
        40px;

    padding: 28px 30px;

    border-left:
        3px solid
        #547cff;

    border-radius: 0 16px 16px 0;

    background:
        rgba(51, 81, 174, 0.10);
}


.dynamic-memory-quote p {
    margin: 0;

    color: #d9e1f8;

    font-size: 20px;

    font-style: italic;

    line-height: 1.7;
}


/* DETAILS */

.memory-details-box {
    padding: 30px;

    border:
        1px solid
        rgba(122, 150, 225, 0.12);

    border-radius: 20px;

    background:
        rgba(7, 13, 31, 0.72);
}


.dynamic-memory-details {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 20px;
}


.memory-detail-item {
    padding: 17px;

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.035);
}


.memory-detail-item span {
    display: block;

    margin-bottom: 7px;

    color: #727f9f;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}


.memory-detail-item strong {
    color: #dce5ff;

    font-size: 14px;
}


.dynamic-memory-bottom {
    margin-top: 38px;

    text-align: center;
}


/* LOADING / ERROR */

.memory-loading,
.memory-error {
    padding: 70px 20px;

    text-align: center;

    color: #9ba8ca;
}


.memory-error h2 {
    color: #ffffff;
}


/* MOBILE */

@media (max-width: 700px) {

    .dynamic-memory-container {
        width:
            calc(100% - 22px);

        padding:
            30px 0
            60px;
    }


    .memory-back-btn {
        margin-bottom: 30px;
    }


    .dynamic-memory-main-image {
        min-height: 260px;

        border-radius: 16px;
    }


    .dynamic-memory-main-image img {
        min-height: 260px;
    }


    .memory-story {
        padding: 22px;
    }


    .memory-story h2 {
        font-size: 22px;
    }


    .dynamic-memory-story-text p {
        font-size: 15px;
    }


    .dynamic-memory-quote {
        padding: 22px;
    }


    .dynamic-memory-quote p {
        font-size: 17px;
    }


    .memory-details-box {
        padding: 22px;
    }


    .dynamic-memory-details {
        grid-template-columns: 1fr;
    }

}/* ========================================
   DYNAMIC MEMORY DETAILS - FINAL FIX
======================================== */

.dynamic-memory-page .memory-details-box {
    width: 100% !important;
    padding: 30px !important;

    display: block !important;

    border-radius: 20px !important;

    overflow: hidden !important;
}


.dynamic-memory-page .dynamic-memory-details {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin-top: 22px !important;

    align-items: stretch !important;
}


.dynamic-memory-page .memory-detail-item {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 105px !important;

    margin: 0 !important;
    padding: 20px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 8px !important;

    border:
        1px solid
        rgba(115, 143, 220, 0.14) !important;

    border-radius: 14px !important;

    background:
        rgba(255, 255, 255, 0.035) !important;

    overflow: hidden !important;
}


/* REMOVE OLD DECORATIONS */

.dynamic-memory-page .memory-detail-item::before,
.dynamic-memory-page .memory-detail-item::after {
    display: none !important;
    content: none !important;
}


.dynamic-memory-page .memory-detail-item span {
    position: static !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #7180a5 !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;
}


.dynamic-memory-page .memory-detail-item strong {
    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #e1e8ff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.45 !important;

    overflow-wrap: anywhere !important;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

    .dynamic-memory-page .memory-details-box {
        padding: 22px !important;
    }


    .dynamic-memory-page .dynamic-memory-details {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }


    .dynamic-memory-page .memory-detail-item {
        min-height: 90px !important;

        padding: 17px !important;
    }

}/* ========================================
   MEMORY DETAIL ICON - FINAL FIX
======================================== */

.memory-details-box .memory-detail-item {
    display: flex !important;
    align-items: center !important;

    gap: 18px !important;

    position: relative !important;
}


/* ICON CIRCLE */

.memory-details-box .memory-detail-icon {
    position: static !important;

    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    min-height: 68px !important;

    max-width: 68px !important;
    max-height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        rgba(113, 88, 255, 0.18) !important;

    font-size: 27px !important;

    line-height: 1 !important;

    flex: 0 0 68px !important;

    transform: none !important;
}


/* REMOVE OLD CIRCLE / DECORATION */

.memory-details-box .memory-detail-icon::before,
.memory-details-box .memory-detail-icon::after {
    content: none !important;
    display: none !important;
}


/* TEXT */

.memory-detail-content {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 7px !important;
}


.memory-detail-content small {
    margin: 0 !important;

    color: #8e91ad !important;

    font-size: 12px !important;

    letter-spacing: 2px !important;
}


.memory-detail-content strong {
    margin: 0 !important;

    color: #e5eaff !important;

    font-size: 17px !important;

    line-height: 1.4 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .memory-details-box .memory-detail-icon {
        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;

        flex-basis: 58px !important;

        font-size: 23px !important;
    }

}


/* ========================================
   MAAMVERSE — PREMIUM UNIVERSE UPDATE
   Append this block at the END of style.css
======================================== */


/* ========================================
   NAV LOGO LINK
======================================== */

.nav-logo {
    color: inherit;
    text-decoration: none;
}


/* ========================================
   PREMIUM IDENTITY
======================================== */

.premium-identity-section {
    padding-top: 105px;
}

.premium-identity-shell {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);
    gap: 28px;
    align-items: stretch;
}

.premium-profile-card,
.premium-detail-card,
.premium-connect-strip,
.premium-contact-main,
.premium-contact-socials {
    border:
        1px solid rgba(132, 111, 255, 0.24);

    background:
        linear-gradient(
            145deg,
            rgba(27, 29, 52, 0.90),
            rgba(12, 13, 29, 0.94)
        );

    box-shadow:
        0 22px 65px rgba(8, 7, 35, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.premium-profile-card {
    position: relative;
    overflow: hidden;

    padding: 38px;

    border-radius: 28px;
}

.premium-profile-card::before {
    content: "";

    position: absolute;
    width: 260px;
    height: 260px;
    top: -120px;
    right: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(122, 91, 255, 0.20),
            transparent 68%
        );

    pointer-events: none;
}

.premium-profile-top {
    text-align: center;
}

.premium-profile-card .profile-image-box {
    width: 172px;
    height: 172px;

    margin: 0 auto 22px;
}

.premium-profile-label,
.premium-card-label,
.premium-contact-kicker {
    display: inline-block;

    color: #9584ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.premium-profile-name {
    margin: 12px 0 9px;

    font-size:
        clamp(27px, 3vw, 36px);

    line-height: 1.15;
}

.premium-profile-role {
    margin: 0;

    color: #b4b2c4;

    font-size: 15px;
    line-height: 1.6;
}

.journey-line {
    margin: 30px 0;

    display: grid;
    grid-template-columns:
        1fr auto 1fr;

    gap: 14px;
    align-items: center;
}

.journey-point {
    min-width: 0;

    padding: 18px 14px;

    border:
        1px solid rgba(132, 111, 255, 0.18);

    border-radius: 18px;

    background:
        rgba(110, 88, 255, 0.065);

    text-align: center;
}

.journey-point span {
    display: block;

    margin-bottom: 7px;

    font-size: 23px;
}

.journey-point strong {
    display: block;

    color: #f0eff7;

    font-size: 14px;
}

.journey-point small {
    display: block;

    margin-top: 5px;

    color: #858395;

    font-size: 10px;
}

.journey-arrow {
    color: #8f7aff;

    font-size: 23px;
}

.premium-profile-bio {
    margin: 0;

    color: #b8b6c5;

    font-size: 15px;
    line-height: 1.85;
}

.premium-tags {
    margin-top: 24px;
}

/* ========================================
   PREMIUM DETAIL CARDS
======================================== */

.premium-identity-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.premium-detail-card {
    display: grid;
    grid-template-columns:
        58px 1fr;

    gap: 20px;

    padding: 27px;

    border-radius: 24px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.premium-detail-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(154, 132, 255, 0.55);

    box-shadow:
        0 22px 55px rgba(35, 23, 105, 0.22);
}

.premium-detail-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(119, 93, 255, 0.18),
            rgba(86, 70, 185, 0.12)
        );

    font-size: 24px;
}

.premium-detail-card h3 {
    margin: 7px 0 14px;

    font-size: 23px;
}

.premium-detail-card p {
    margin: 0 0 10px;

    color: #b7b4c4;

    line-height: 1.75;
}

.premium-bangla {
    color: #d2cdef !important;
}

.premium-facts {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.premium-facts > div {
    padding: 14px;

    border:
        1px solid rgba(132, 111, 255, 0.14);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);
}

.premium-facts small {
    display: block;

    margin-bottom: 6px;

    color: #777689;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.premium-facts strong {
    color: #e7e4f5;

    font-size: 13px;
    line-height: 1.45;
}

.education-timeline {
    display: grid;
    gap: 10px;
}

.education-row {
    display: grid;
    grid-template-columns:
        58px 1fr;

    gap: 14px;
    align-items: start;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(137, 116, 255, 0.10);
}

.education-row:last-child {
    border-bottom: 0;
}

.education-row strong {
    color: #9d8cff;

    font-size: 13px;
}

.education-row span {
    color: #b9b6c7;

    font-size: 14px;
    line-height: 1.55;
}


/* ========================================
   PREMIUM CONTACT
======================================== */

.premium-contact-shell {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 24px;
}

.premium-contact-main,
.premium-contact-socials {
    border-radius: 26px;
}

.premium-contact-main {
    padding: 40px;
}

.premium-contact-main h3 {
    margin: 12px 0 16px;

    font-size:
        clamp(28px, 4vw, 40px);

    line-height: 1.15;
}

.premium-contact-main > p {
    max-width: 500px;

    color: #b6b3c3;

    line-height: 1.8;
}

.premium-contact-main .contact-buttons {
    justify-content: flex-start;
}

.premium-contact-socials {
    padding: 18px;
}

.premium-contact-socials > a {
    display: grid;
    grid-template-columns:
        42px 1fr auto;

    gap: 14px;
    align-items: center;

    padding: 15px;

    border-bottom:
        1px solid rgba(137, 116, 255, 0.10);

    color: inherit;

    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.premium-contact-socials > a:last-child {
    border-bottom: 0;
}

.premium-contact-socials > a:hover {
    transform: translateX(4px);

    background:
        rgba(110, 88, 255, 0.07);
}

.contact-social-mark {
    width: 42px;
    height: 42px;

    flex-basis: 42px;

    border-radius: 13px;
}

.premium-contact-socials strong {
    display: block;

    color: #eceaf4;

    font-size: 14px;
}

.premium-contact-socials small {
    display: block;

    margin-top: 4px;

    color: #777689;

    font-size: 11px;
}

.premium-contact-socials b {
    color: #8171dd;

    font-size: 16px;
}


/* ========================================
   MEMORY CARDS — SLIGHT PREMIUM POLISH
======================================== */

.memory-card {
    background:
        linear-gradient(
            145deg,
            rgba(27, 29, 52, 0.90),
            rgba(12, 13, 29, 0.96)
        ) !important;

    box-shadow:
        0 18px 50px rgba(8, 7, 35, 0.20);
}

.memory-card:hover {
    transform:
        translateY(-8px) !important;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 980px) {

    .premium-identity-shell,
    .premium-contact-shell {
        grid-template-columns: 1fr;
    }

    .premium-profile-card {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 620px) {

    .premium-identity-section {
        padding-top: 82px;
    }

    .premium-profile-card {
        padding: 28px 20px;
    }

    .premium-profile-card .profile-image-box {
        width: 145px;
        height: 145px;
    }

    .premium-profile-name {
        font-size: 27px;
    }

    .journey-line {
        gap: 9px;
    }

    .journey-point {
        padding: 15px 9px;
    }

    .journey-point small {
        font-size: 9px;
    }

    .premium-detail-card {
        grid-template-columns: 1fr;

        padding: 22px;
    }

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

    .premium-contact-main {
        padding: 30px 22px;
    }

    .premium-contact-main .contact-buttons {
        justify-content: center;
    }

    .premium-contact-socials {
        padding: 10px;
    }

}

@media (max-width: 430px) {

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

    .journey-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

}

/* ========================================
   CONTACT BALANCE FIX
   WhatsApp + Email side by side
   Social card keeps natural height
======================================== */

.premium-contact-shell {
    align-items: start;
}

.premium-contact-main,
.premium-contact-socials {
    height: auto;
    align-self: start;
}

.premium-contact-main .contact-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 26px;
}

.premium-contact-main .contact-buttons a {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px 18px;
    text-align: center;
}

.premium-contact-socials {
    padding-bottom: 10px;
}

@media (max-width: 620px) {

    .premium-contact-main .contact-buttons {
        grid-template-columns: 1fr !important;
    }

}

/* ========================================
   CONTACT SOCIAL MEDIA HEADING
======================================== */

.premium-social-heading {
    padding: 22px 15px 20px;

    border-bottom:
        1px solid rgba(137, 116, 255, 0.12);
}

.premium-social-heading h3 {
    margin: 9px 0 6px;

    color: #f2f0f8;

    font-size: 22px;
    line-height: 1.25;
}

.premium-social-heading p {
    margin: 0;

    color: #858395;

    font-size: 12px;
    line-height: 1.6;
}

/* ========================================
   CONTACT — FINAL CLASSIC SOCIAL GRID
   Old Signal Center style inside Contact
======================================== */

.contact-communication-card {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;

    text-align: center;
}

.contact-communication-card > p {
    margin-left: auto;
    margin-right: auto;
}

.contact-communication-card .contact-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100%;
    max-width: 720px;

    margin:
        28px auto 0;

    gap: 16px !important;
}

.contact-communication-card .contact-buttons a {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.contact-social-title {
    margin:
        58px auto 28px;

    text-align: center;
}

.contact-social-title h3 {
    margin:
        10px 0 8px;

    color: #f2f0f8;

    font-size:
        clamp(28px, 3vw, 38px);
}

.contact-social-title p {
    margin: 0;

    color: #9996a7;

    font-size: 15px;
}

.contact-social-grid {
    align-items: stretch;
}

.contact-social-grid .social-card {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 265px;

    padding:
        38px 22px;
}

.contact-social-grid .social-card h3 {
    margin-top: 22px;
}

.contact-social-grid .social-card p {
    margin-top: 10px;
}

@media (max-width: 1000px) {

    .contact-social-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 620px) {

    .contact-communication-card .contact-buttons {
        grid-template-columns: 1fr !important;
    }

    .contact-social-title {
        margin-top: 45px;
    }

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

    .contact-social-grid .social-card {
        min-height: 220px;
    }

}

/* ========================================
   MAAMVERSE — SAFE PREMIUM LIVE EFFECTS
   Layout-safe moving border glow
======================================== */


/* NAVBAR LIVE STATE */

.navbar {
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

.navbar.navbar-scrolled {
    background: rgba(5, 6, 19, 0.88);
    border-bottom-color: rgba(134, 112, 255, 0.28);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(108, 83, 255, 0.08);

    backdrop-filter: blur(18px);
}


/* SAFE SCROLL REVEAL */

.safe-reveal {
    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity 0.72s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1);

    transition-delay: var(--safe-delay, 0ms);
}

.safe-reveal.safe-show {
    opacity: 1;
    transform: translateY(0);
}


/* IDENTITY LAYOUT SAFETY */

.premium-identity-shell,
.premium-identity-details,
.premium-detail-card {
    min-width: 0;
}

.premium-identity-details,
.premium-detail-card {
    width: 100%;
}

.premium-detail-card > div:last-child,
.premium-facts {
    min-width: 0;
    width: 100%;
}


/* MOVING GLOW BORDER */

@property --mv-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.premium-profile-card,
.premium-detail-card,
.gallery-intro,
.memory-card,
.contact-communication-card,
.contact-social-grid .social-card,
.memory-main-image,
.memory-story,
.memory-details-box {
    position: relative;
    isolation: isolate;
}

.premium-profile-card::after,
.premium-detail-card::after,
.gallery-intro::after,
.memory-card::after,
.contact-communication-card::after,
.contact-social-grid .social-card::after,
.memory-main-image::after,
.memory-story::after,
.memory-details-box::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 20;

    pointer-events: none;

    border-radius: inherit;
    padding: 1.5px;

    background:
        conic-gradient(
            from var(--mv-border-angle),
            transparent 0deg,
            transparent 246deg,
            rgba(125, 93, 255, 0.06) 262deg,
            rgba(148, 116, 255, 0.90) 286deg,
            rgba(76, 166, 255, 1) 305deg,
            rgba(225, 217, 255, 1) 318deg,
            rgba(134, 100, 255, 0.50) 336deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    filter:
        drop-shadow(0 0 5px rgba(133, 104, 255, 0.78))
        drop-shadow(0 0 10px rgba(74, 151, 255, 0.25));

    animation:
        maamverseSafeBorderRun
        5.2s
        linear
        infinite;
}

.premium-detail-card:nth-child(2)::after,
.memory-card:nth-child(2)::after,
.contact-social-grid .social-card:nth-child(2)::after {
    animation-delay: -1.3s;
}

.premium-detail-card:nth-child(3)::after,
.memory-card:nth-child(3)::after,
.contact-social-grid .social-card:nth-child(3)::after {
    animation-delay: -2.6s;
}

.memory-card:nth-child(4)::after,
.contact-social-grid .social-card:nth-child(4)::after {
    animation-delay: -3.9s;
}

.memory-card:nth-child(5)::after {
    animation-delay: -1.9s;
}

.memory-card:nth-child(6)::after {
    animation-delay: -3.2s;
}

@keyframes maamverseSafeBorderRun {
    to {
        --mv-border-angle: 360deg;
    }
}


/* PREMIUM HOVER GLOW */

.premium-profile-card,
.premium-detail-card,
.gallery-intro,
.memory-card,
.contact-communication-card,
.contact-social-grid .social-card {
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.premium-profile-card:hover,
.premium-detail-card:hover,
.gallery-intro:hover,
.contact-communication-card:hover,
.contact-social-grid .social-card:hover {
    border-color: rgba(151, 130, 255, 0.58) !important;

    box-shadow:
        0 18px 48px rgba(8, 7, 34, 0.30),
        0 0 24px rgba(119, 91, 255, 0.15);

    transform: translateY(-4px);
}

.memory-card:hover {
    transform: translateY(-7px) !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .safe-reveal,
    .safe-reveal.safe-show {
        transform: none;
    }

    .premium-profile-card:hover,
    .premium-detail-card:hover,
    .gallery-intro:hover,
    .contact-communication-card:hover,
    .contact-social-grid .social-card:hover,
    .memory-card:hover {
        transform: none !important;
    }

    .premium-profile-card::after,
    .premium-detail-card::after,
    .gallery-intro::after,
    .memory-card::after,
    .contact-communication-card::after,
    .contact-social-grid .social-card::after,
    .memory-main-image::after,
    .memory-story::after,
    .memory-details-box::after {
        padding: 1.2px;
        animation-duration: 6.2s;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .safe-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .premium-profile-card::after,
    .premium-detail-card::after,
    .gallery-intro::after,
    .memory-card::after,
    .contact-communication-card::after,
    .contact-social-grid .social-card::after,
    .memory-main-image::after,
    .memory-story::after,
    .memory-details-box::after {
        animation: none !important;
    }

}/* ========================================
   EDUCATION JOURNEY — INNER BOX STYLE
======================================== */

.education-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}


/* EACH EDUCATION ITEM */

.education-row {
    display: grid;
    grid-template-columns: 75px 1fr;

    gap: 18px;
    align-items: center;

    padding: 17px 20px;

    border:
        1px solid
        rgba(132, 111, 255, 0.18);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* REMOVE OLD DIVIDER */

.education-row,
.education-row:last-child {
    border-bottom:
        1px solid
        rgba(132, 111, 255, 0.18);
}


/* YEAR */

.education-row strong {
    color: #9d8cff;

    font-size: 15px;
    font-weight: 700;
}


/* EDUCATION TEXT */

.education-row span {
    color: #c1bece;

    font-size: 14px;
    line-height: 1.55;
}


/* HOVER */

.education-row:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(151, 130, 255, 0.55);

    background:
        rgba(112, 87, 255, 0.07);

    box-shadow:
        0 8px 25px
        rgba(65, 45, 170, 0.10);
}


/* MOBILE */

@media (max-width: 600px) {

    .education-row {
        grid-template-columns: 1fr;
        gap: 7px;

        padding: 16px;
    }

}

/* ========================================
   SPECIAL DAY — INTERACTIVE BIRTHDAY
======================================== */


/* Match the other Personal Details boxes */

.special-day-box {
    width: 100%;
    min-width: 0;

    padding: 14px;

    text-align: left;

    border:
        1px solid rgba(132, 111, 255, 0.14);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #ffffff;

    font-family: inherit;

    cursor: pointer;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
}


.special-day-box small {
    display: block;

    margin-bottom: 6px;

    color: #777689;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.special-day-box strong {
    display: block;

    color: #e7e4f5;

    font-size: 13px;
    line-height: 1.45;
}


.special-day-hint {
    display: block;

    margin-top: 7px;

    color: #9684ff;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.5px;
}


.special-day-box:hover,
.special-day-box[aria-expanded="true"] {
    transform: translateY(-2px);

    border-color:
        rgba(151, 130, 255, 0.52);

    background:
        rgba(112, 87, 255, 0.07);

    box-shadow:
        0 8px 24px
        rgba(65, 45, 170, 0.11);
}


/* Expanded birthday story */

.special-day-details {
    display: grid;

    grid-template-columns:
        54px minmax(0, 1fr);

    gap: 16px;

    max-height: 0;

    margin-top: 0;

    padding:
        0 18px;

    overflow: hidden;

    opacity: 0;

    border:
        1px solid transparent;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(112, 87, 255, 0.075),
            rgba(255, 255, 255, 0.018)
        );

    transform:
        translateY(-6px);

    transition:
        max-height 0.45s ease,
        opacity 0.32s ease,
        transform 0.38s ease,
        margin-top 0.38s ease,
        padding 0.38s ease,
        border-color 0.38s ease;
}


.special-day-details.open {
    max-height: 320px;

    margin-top: 14px;

    padding:
        18px;

    opacity: 1;

    transform:
        translateY(0);

    border-color:
        rgba(140, 117, 255, 0.20);
}


.special-day-details-icon {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(115, 92, 255, 0.14);

    border:
        1px solid
        rgba(140, 117, 255, 0.16);

    font-size: 23px;
}


.special-day-details h4 {
    margin:
        7px 0 8px;

    color: #f2f0f8;

    font-size: 18px;
}


.special-day-details p {
    margin: 0;

    color: #aaa8b8;

    font-size: 13px;
    line-height: 1.75;
}


/* Mobile */

@media (max-width: 600px) {

    .special-day-details {
        grid-template-columns: 1fr;
    }

    .special-day-details.open {
        max-height: 430px;
    }

    .special-day-box:hover {
        transform: none;
    }

}
/* ========================================
   MAAMVERSE — FINAL SECTION SPACING
   Compact Premium Flow
======================================== */


/* IDENTITY BOTTOM SPACE */

.premium-identity-section {
    padding-bottom: 65px !important;
}


/* ========================================
   ONLINE CENTER
======================================== */

.online-center-section {
    padding-top: 35px !important;
    padding-bottom: 70px !important;
}


/* Remove extra heading margin */

.online-center-section
.contact-social-title {
    margin: 0 auto 30px !important;
}


/* ========================================
   MEMORIES
======================================== */

#gallery {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
}

#gallery .section-title {
    margin-bottom: 45px;
}

.gallery-footer-text {
    margin-top: 45px;
}


/* ========================================
   CONTACT
======================================== */

#contact {
    padding-top: 75px !important;
    padding-bottom: 90px !important;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .premium-identity-section {
        padding-bottom: 45px !important;
    }

    .online-center-section {
        padding-top: 25px !important;
        padding-bottom: 55px !important;
    }

    #gallery {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    #contact {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
    }

}

/* ========================================
   MAAMVERSE — FINAL COSMIC 3D EFFECTS
   Safe background motion + subtle CSS-only depth
   No HTML or JavaScript changes required
======================================== */


/* ========================================
   1) STAR TWINKLE + VERY SLOW DRIFT
======================================== */

.stars {
    animation:
        maamverseStarTwinkle 7s ease-in-out infinite,
        maamverseStarDrift 34s linear infinite;

    will-change:
        opacity,
        background-position;
}

@keyframes maamverseStarTwinkle {
    0%,
    100% {
        opacity: 0.48;
    }

    50% {
        opacity: 0.66;
    }
}

@keyframes maamverseStarDrift {
    0% {
        background-position:
            10px 20px,
            40px 70px,
            90px 130px;
    }

    100% {
        background-position:
            45px 55px,
            10px 115px,
            135px 95px;
    }
}


/* ========================================
   2) SOFT COSMIC NEBULA / AURORA
   Built inside the existing .stars layer
======================================== */

.stars::before,
.stars::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.20;

    will-change:
        transform,
        opacity;
}

.stars::before {
    width: 52vw;
    height: 52vw;

    min-width: 420px;
    min-height: 420px;

    top: -18%;
    left: -14%;

    background:
        radial-gradient(
            circle,
            rgba(116, 78, 255, 0.34) 0%,
            rgba(81, 68, 220, 0.16) 38%,
            transparent 72%
        );

    animation:
        maamverseNebulaOne
        22s
        ease-in-out
        infinite
        alternate;
}

.stars::after {
    width: 46vw;
    height: 46vw;

    min-width: 380px;
    min-height: 380px;

    right: -12%;
    bottom: -16%;

    background:
        radial-gradient(
            circle,
            rgba(69, 143, 255, 0.26) 0%,
            rgba(106, 82, 255, 0.14) 42%,
            transparent 74%
        );

    animation:
        maamverseNebulaTwo
        26s
        ease-in-out
        infinite
        alternate;
}

@keyframes maamverseNebulaOne {
    0% {
        transform:
            translate3d(-2%, -2%, 0)
            scale(0.96);

        opacity: 0.16;
    }

    50% {
        transform:
            translate3d(9%, 7%, 0)
            scale(1.06);

        opacity: 0.23;
    }

    100% {
        transform:
            translate3d(3%, 13%, 0)
            scale(1);

        opacity: 0.19;
    }
}

@keyframes maamverseNebulaTwo {
    0% {
        transform:
            translate3d(3%, 3%, 0)
            scale(1);

        opacity: 0.14;
    }

    50% {
        transform:
            translate3d(-9%, -6%, 0)
            scale(1.08);

        opacity: 0.22;
    }

    100% {
        transform:
            translate3d(-3%, -12%, 0)
            scale(0.98);

        opacity: 0.17;
    }
}


/* ========================================
   3) SAFE CSS-ONLY 3D DEPTH
   Fixed subtle angle — no mouse tracking,
   no injected elements, no width changes
======================================== */

.premium-profile-card,
.premium-detail-card,
.gallery-intro,
.memory-card,
.contact-communication-card,
.contact-social-grid .social-card {
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    will-change:
        transform,
        box-shadow;

    transition:
        transform 0.32s
        cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.32s ease,
        box-shadow 0.32s ease;
}


/* PROFILE + DETAIL CARDS */

.premium-profile-card:hover,
.premium-detail-card:hover {
    transform:
        perspective(1100px)
        translateY(-5px)
        rotateX(0.9deg)
        rotateY(-0.9deg)
        scale(1.004)
        !important;

    box-shadow:
        0 24px 58px rgba(3, 4, 18, 0.34),
        0 0 30px rgba(116, 88, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    border-color:
        rgba(151, 130, 255, 0.62)
        !important;
}


/* ONLINE CENTER + INTRO + CONTACT */

.gallery-intro:hover,
.contact-communication-card:hover,
.contact-social-grid .social-card:hover {
    transform:
        perspective(1100px)
        translateY(-5px)
        rotateX(0.7deg)
        rotateY(-0.7deg)
        scale(1.004)
        !important;

    box-shadow:
        0 22px 52px rgba(3, 4, 18, 0.32),
        0 0 28px rgba(116, 88, 255, 0.15);
}


/* MEMORY CARDS */

.memory-card:hover {
    transform:
        perspective(1100px)
        translateY(-8px)
        rotateX(0.8deg)
        rotateY(-0.8deg)
        scale(1.006)
        !important;

    box-shadow:
        0 26px 60px rgba(3, 4, 18, 0.35),
        0 0 30px rgba(116, 88, 255, 0.16);
}


/* ========================================
   4) SUBTLE FLOATING DEPTH FOR ICONS
======================================== */

.premium-detail-icon,
.gallery-intro-icon,
.social-icon {
    transform: translateZ(0);

    animation:
        maamverseIconFloat
        5.6s
        ease-in-out
        infinite;

    will-change: transform;
}

.premium-detail-card:nth-child(2)
.premium-detail-icon,
.contact-social-grid
.social-card:nth-child(2)
.social-icon {
    animation-delay: -1.4s;
}

.premium-detail-card:nth-child(3)
.premium-detail-icon,
.contact-social-grid
.social-card:nth-child(3)
.social-icon {
    animation-delay: -2.8s;
}

.contact-social-grid
.social-card:nth-child(4)
.social-icon {
    animation-delay: -4.2s;
}

@keyframes maamverseIconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* ========================================
   5) PROFILE IMAGE DEPTH
======================================== */

.profile-image-box {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    will-change: transform;
}

.premium-profile-card:hover
.profile-image-box {
    transform:
        translateY(-3px)
        scale(1.012);

    box-shadow:
        0 0 30px rgba(105, 76, 255, 0.46),
        0 14px 32px rgba(0, 0, 0, 0.20);
}


/* ========================================
   6) SECTION TITLE AMBIENT GLOW
======================================== */

.section-title h2 {
    text-shadow:
        0 0 28px
        rgba(126, 101, 255, 0.08);

    transition:
        text-shadow 0.35s ease;
}

.section-title:hover h2 {
    text-shadow:
        0 0 32px
        rgba(126, 101, 255, 0.16);
}


/* ========================================
   7) KEEP THE GATEWAY UNTOUCHED
======================================== */

.gateway-page .stars {
    animation: none !important;
}

.gateway-page .stars::before,
.gateway-page .stars::after {
    display: none !important;
}


/* ========================================
   8) MOBILE / TOUCH
   Keep background alive, remove 3D tilt
======================================== */

@media
(max-width: 768px),
(hover: none),
(pointer: coarse) {

    .premium-profile-card:hover,
    .premium-detail-card:hover,
    .gallery-intro:hover,
    .memory-card:hover,
    .contact-communication-card:hover,
    .contact-social-grid .social-card:hover {
        transform:
            none
            !important;
    }

    .premium-profile-card:hover
    .profile-image-box {
        transform: none;
    }

    .premium-detail-icon,
    .gallery-intro-icon,
    .social-icon {
        animation-duration: 6.8s;
    }

    .stars::before,
    .stars::after {
        filter: blur(85px);
        opacity: 0.14;
    }
}


/* ========================================
   9) REDUCED MOTION
======================================== */

@media
(prefers-reduced-motion: reduce) {

    .stars,
    .stars::before,
    .stars::after,
    .premium-detail-icon,
    .gallery-intro-icon,
    .social-icon {
        animation:
            none
            !important;
    }

    .premium-profile-card:hover,
    .premium-detail-card:hover,
    .gallery-intro:hover,
    .memory-card:hover,
    .contact-communication-card:hover,
    .contact-social-grid .social-card:hover,
    .premium-profile-card:hover
    .profile-image-box {
        transform:
            none
            !important;
    }
}
/* ========================================
   MAAMVERSE — INNER BOX 3D EFFECT
   Personal Details + Education
======================================== */


/* ========================================
   PERSONAL DETAILS — ALL 4 BOXES
======================================== */

.premium-facts > div,
.special-day-box {
    position: relative;

    transform-origin: center center;

    backface-visibility: hidden;

    transition:
        transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
}


/* NAME / FROM / LIFE JOURNEY */

.premium-facts > div:hover {
    transform:
        perspective(700px)
        translateY(-4px)
        rotateX(2deg)
        rotateY(-1.5deg)
        scale(1.015);

    border-color:
        rgba(151, 130, 255, 0.58);

    background:
        rgba(112, 87, 255, 0.07);

    box-shadow:
        0 12px 28px
        rgba(10, 8, 40, 0.30),

        0 0 20px
        rgba(117, 90, 255, 0.14);
}


/* SPECIAL DAY — SAME 3D STYLE */

.special-day-box:hover,
.special-day-box[aria-expanded="true"] {
    transform:
        perspective(700px)
        translateY(-4px)
        rotateX(2deg)
        rotateY(-1.5deg)
        scale(1.015);

    border-color:
        rgba(151, 130, 255, 0.62);

    background:
        rgba(112, 87, 255, 0.08);

    box-shadow:
        0 12px 28px
        rgba(10, 8, 40, 0.30),

        0 0 22px
        rgba(117, 90, 255, 0.16);
}


/* ========================================
   EDUCATION INNER BOXES
======================================== */

.education-row {
    transform-origin: center center;

    backface-visibility: hidden;

    transition:
        transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
}


.education-row:hover {
    transform:
        perspective(800px)
        translateY(-4px)
        rotateX(1.6deg)
        rotateY(-1deg)
        scale(1.008);

    border-color:
        rgba(151, 130, 255, 0.58);

    background:
        rgba(112, 87, 255, 0.07);

    box-shadow:
        0 12px 30px
        rgba(10, 8, 40, 0.28),

        0 0 20px
        rgba(117, 90, 255, 0.13);
}


/* ========================================
   MOBILE / TOUCH — NO TILT
======================================== */

@media (max-width: 768px),
       (hover: none),
       (pointer: coarse) {

    .premium-facts > div:hover,
    .special-day-box:hover,
    .education-row:hover {
        transform: none !important;
    }

}