.logo {
    width: 311px;
}

@font-face {
    font-family: 'times';
    /* A unique name for your font family */
    src: url('times.ttf') format('truetype');
    /* Path to the font file */
    font-weight: normal;
    /* Specifies the weight of this specific font file */
    font-style: normal;
    /* Specifies the style of this specific font file */
    font-display: swap;
    /* Controls font loading behavior */
}

:root {
    --bg-base: #f3f4f6;
    --primary: #0d67b2;
    --primary-dark: #084f8b;
    --ink: #222833;
    --ink-soft: #3e4350;
    --line: #d7dbee;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Cambria, "Libre Baskerville", "Times New Roman", Times, serif;
    color: var(--ink);
    overflow-x: hidden;
    /* background:
        radial-gradient(circle at 100% 10%, rgba(177, 221, 255, 0.85) 0%, rgba(177, 221, 255, 0) 38%),
        radial-gradient(circle at 0% 92%, rgba(177, 221, 255, 0.75) 0%, rgba(177, 221, 255, 0) 34%),
        #ffffff; 
          animation: gradient 1s ease infinite; */
}


/* @keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
} */

.blob-container {
    position: relative;
    width: 400px;
}

.blob {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 100% 10%, rgba(177, 221, 255, 0.85) 0%, rgba(177, 221, 255, 0) 38%);
    /* Blob gradient */
    border-radius: 50%;
    /* Initial shape */
    animation: morph 8s infinite ease-in-out;
    /* Animation properties */
    position: absolute;
    opacity: 0.8;
    /* Optional: adds a subtle depth effect */
    filter: blur(40px);
    /* Optional: creates a soft, glowing effect */
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 31% 70% 40%;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        border-radius: 40% 60% 60% 40% / 50% 60% 60% 70%;
        transform: translate(20px, -20px) rotate(41deg) scale(1.1);
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 31% 70% 40%;
        transform: translate(0, 0) rotate(0deg);
    }
}








/* .page {
    max-width: 98vw;
    margin: 0 auto;
    padding: 32px 28px 64px;
    position: relative;
    z-index: 1;
} */

/* ── ANIMATED BACKGROUND BLOBS ── */
@keyframes blob1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(60px, -40px) scale(1.12);
    }

    66% {
        transform: translate(-30px, 50px) scale(0.92);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes blob2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-70px, 30px) scale(1.08);
    }

    66% {
        transform: translate(40px, -60px) scale(0.95);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes blob3 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, 40px) scale(1.15);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: rgba(147, 210, 255, 0.7);
    top: -120px;
    right: -80px;
    animation: blob1 12s ease-in-out infinite;
}

.blob-2 {
    width: 420px;
    height: 420px;
    background: rgba(177, 221, 255, 0.65);
    bottom: -100px;
    left: -60px;
    animation: blob2 15s ease-in-out infinite;
}

.blob-3 {
    width: 280px;
    height: 280px;
    background: rgba(100, 185, 255, 0.45);
    top: 40%;
    left: 38%;
    animation: blob3 18s ease-in-out infinite;
}

/* ── LOGO ── */
.logo {
    /* width: fit-content; */
    margin: 0 auto 48px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* .logo img {
    height: 208px;
    width: auto;
    display: block;
} */

/* ── CONTENT GRID ── */
.content {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
    gap: 48px;
    min-height: 66vh;
    position: relative;
    z-index: 1;
}

/* ── COLLAGE ── */
.collage {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.tile {
    position: relative;
    border-radius: 12px;
    min-height: 128px;
    border: 1px solid #d4d7df;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    filter: grayscale(1) contrast(0.95);
}

/* Overlay tint */
.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(210, 214, 220, 0.3);
    z-index: 1;
}

/* Fade-right gradient */
.tile.fade-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240, 242, 246, 0) 40%, rgba(240, 242, 246, 0.95) 100%);
    z-index: 2;
}

/* Grid placement */
.t1 {
    grid-column: 1 / span 2;
}

.t2 {
    grid-column: 3 / span 4;
}

.t3 {
    grid-column: 1 / span 4;
}

.t4 {
    grid-column: 5 / span 2;
}

.t5 {
    grid-column: 1 / span 3;
}

.t6 {
    grid-column: 4 / span 3;
}

.t7 {
    grid-column: 2 / span 4;
    min-height: 112px;
}

.t1 {
    background-image: url("assets/img/79616a6081d9abaf51882fb3d758a80a74c22666.jpg");
}

.t2 {
    background-image: url("assets/img/ac75d2e7ca02a4a3d95ef3b562376434e0bef7a0.png");
}

.t3 {
    background-image: url("assets/img/1601c1afb2ad8f7f0b10672b3c6b3471e10ad0c7.png");
}

.t4 {
    background-image: url("assets/img/5fb250b6f0e713cce495ae4f064866f1e43264ab.png");
}

.t5 {
    background-image: url("assets/img/1e976c66fd74971043ad59ebc404599ae466b7c3.png");
}

.t6 {
    background-image: url("assets/img/d4a5bcb93795e1a9997c8d76802481770d928cfc.png");
}

.t7 {
    background-image: url("assets/img/ac75d2e7ca02a4a3d95ef3b562376434e0bef7a0.png");
}

/* ── HERO ── */
.hero h1 {
    margin: 0;
    color: var(--primary);
    font-size: clamp(52px, 5.4vw, 88px);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 0 #c4d7eb;
    font-weight: 700;
}

.hero p {
    max-width: 680px;
    margin: 20px 0 12px;
    font-size: clamp(22px, 2vw, 36px);
    line-height: 1.4;
    color: var(--ink-soft);
}

.hero .stay-tuned {
    max-width: 680px;
    margin: 0 0 40px;
    font-size: clamp(20px, 1.8vw, 32px);
    line-height: 1.4;
    color: var(--ink-soft);
    font-style: italic;
}

/* ── FORM ── */
.form-wrap {
    width: 100%;
}

.email-form {
    display: flex;
    width: 100%;
    /* width: 100%;
    height: 68px;
    background: #f9fafe;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 2px 11px rgba(17, 24, 39, 0.1);
    overflow: hidden; */
}

.email-input {


    color: #7878AB;
    font-family: 'times';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    background-color: transparent;
    border: transparent;

    /* flex: 1;
    border: 0;
    padding: 0 30px;
    font-size: clamp(16px, 1.5vw, 26px);
    color: #37455e;
    background: transparent;
    outline: none;
    font-family: inherit; */
}

.email-input::placeholder {
    color: #8f97ae;
}

.submit-btn {
    min-width: 160px;
    width: min(40%, 280px);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #1e67b5, #0c589d);
    color: #fff;
    font-size: clamp(17px, 1.4vw, 26px);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.2s ease;
    font-family: inherit;
}

.submit-btn:hover {
    filter: brightness(1.08);
}

.submit-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.status {
    min-height: 24px;
    margin: 10px 2px 0;
    font-size: 16px;
    color: var(--ink-soft);
}

.status.error {
    color: #b3333a;
}

.status.success {
    color: #166f3d;
}

/* ── FOOTER ── */
.footer {
    margin-top: 72px;
    text-align: center;
    font-size: clamp(14px, 1.6vw, 22px);
    color: #5b616d;
    font-family: "Times New Roman", Times, serif;
    position: relative;
    z-index: 1;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .page {
        padding: 26px 20px 42px;
    }

    .content {
        gap: 30px;
        grid-template-columns: 1fr;
    }

    .collage {
        order: 2;
    }

    .hero {
        order: 1;
    }

    .hero p {
        margin-bottom: 26px;
    }

    .email-form {
        height: 56px;
    }

    .email-input {
        font-size: 18px;
        padding: 0 16px;
    }

    .submit-btn {
        width: 160px;
        font-size: 18px;
    }

    .footer {
        font-size: 16px;
        margin-top: 48px;
    }
}



input:focus {
    outline: none;
}

.form-div {
    display: flex;
    margin-top: 72px;
    height: 64px;
    padding: 12px 12px 12px 31px;
    /* justify-content: flex-end;
              */
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
    background: #F5F5FA;
    /* Inner shadow 2 */
    box-shadow: -2px -2px 4px 0 rgba(255, 255, 255, 0.50) inset, 2px 2px 4px 0 rgba(170, 170, 204, 0.25) inset, 5px 5px 10px 0 rgba(170, 170, 204, 0.50) inset, -5px -5px 10px 0 #FFF inset;
}


.b11 {
    position: absolute;
    top: 0px;
    right: 0px;
    /* Position must be set to relative, absolute, or fixed for 'top'/'left' to work, or use 'transform' */
    animation-name: slide;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    /* Makes the animation repeat endlessly */
    animation-direction: alternate;
    /* Plays the animation forwards then backwards */
    animation-fill-mode: forwards;

    /* Ensures the element stays in its final state after animation */
}

@keyframes slide {
    from {
        /* Start position: original position (translate(0, 0) is implicit if not set) */
        transform: translateX(0);
    }

    to {
        /* End position: 200 pixels to the right */
        transform: translateX(400px);
    }
}




.b12 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    /* Position must be set to relative, absolute, or fixed for 'top'/'left' to work, or use 'transform' */
    animation-name: slide1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    /* Makes the animation repeat endlessly */
    animation-direction: alternate;
    /* Plays the animation forwards then backwards */
    animation-fill-mode: forwards;

    /* Ensures the element stays in its final state after animation */
}

@keyframes slide1 {
    from {
        /* Start position: original position (translate(0, 0) is implicit if not set) */
        transform: translateX(-400px);
    }

    to {
        /* End position: 200 pixels to the right */
        transform: translateX(0px);
    }
}






@media(max-width:768px) {

    body {
        overflow-x: hidden !important;
    }

    .b11 {
        position: absolute;
        top: 0px;
        right: 0px;
        /* Position must be set to relative, absolute, or fixed for 'top'/'left' to work, or use 'transform' */
        animation-name: slide;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        /* Makes the animation repeat endlessly */
        animation-direction: alternate;
        /* Plays the animation forwards then backwards */
        animation-fill-mode: forwards;
        height: 300px;
        /* Ensures the element stays in its final state after animation */
    }

    @keyframes slide {
        from {
            /* Start position: original position (translate(0, 0) is implicit if not set) */
            transform: translateX(0);
        }

        to {
            /* End position: 200 pixels to the right */
            transform: translateX(100px);
        }
    }




    .b12 {
        position: absolute;
        bottom: 0px;
        left: 0px;
        /* Position must be set to relative, absolute, or fixed for 'top'/'left' to work, or use 'transform' */
        animation-name: slide1;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        /* Makes the animation repeat endlessly */
        animation-direction: alternate;
        /* Plays the animation forwards then backwards */
        animation-fill-mode: forwards;

        /* Ensures the element stays in its final state after animation */
    }

    .b11 img {
        height: 100px;
    }

    .b12 img {
        height: 100px;
    }

    @keyframes slide1 {
        from {
            /* Start position: original position (translate(0, 0) is implicit if not set) */
            transform: translateX(-400px);
        }

        to {
            /* End position: 200 pixels to the right */
            transform: translateX(0px);
        }
    }


    .form-div {
        display: block;
        margin-top: 72px;
        height: 64px;
        padding: 12px 5px 12px 12px;
        /* justify-content: flex-end;
              */
        align-items: flex-start;
        gap: 40px;
        align-self: stretch;
        background: #F5F5FA;
        /* Inner shadow 2 */
        box-shadow: -2px -2px 4px 0 rgba(255, 255, 255, 0.50) inset, 2px 2px 4px 0 rgba(170, 170, 204, 0.25) inset, 5px 5px 10px 0 rgba(170, 170, 204, 0.50) inset, -5px -5px 10px 0 #FFF inset;
    }

    .email-form {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }


    .status {
        margin-top: 50px;
    }
}