/* Polished stylesheet for WsplCloud "Hosting Soon" poster */

:root {
    --bg1: #002fff;
    --accent: #ffd200;
    --ribbon: #e31b25;
    --white: #ffffff
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg1);
    background-image: url('assets/footer-bg-img.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    overflow-y: auto;
}

.hero {
    position: relative;
    /* full-viewport hero */
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.bg-decor {
    position: absolute;
    inset: 0;
    background-image: url('assets/footer-bg-img.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.bg-decor::before {
    content: '';
    position: absolute;
    inset: 0;
    /* subtle color overlay to match poster tone */
    background: linear-gradient(180deg, rgba(0, 32, 255, 0.18), rgba(0, 16, 128, 0.24));
    z-index: 1;
    pointer-events: none;
}

.bg-decor .bg-flower {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    max-width: 34%;
    height: auto;
    opacity: 0.95;
}

.bg-decor .bg-flower.left {
    left: 2%;
    top: 4%;
    transform: rotate(-6deg);
}

.bg-decor .bg-flower.right {
    right: 2%;
    top: 8%;
    transform: rotate(6deg) scaleX(-1);
}

.bg-decor .bg-coral {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2%;
    width: 120%;
    opacity: 0.98;
}


/* Foreground decorative elements positioning (banners, leaves, fish, coral, footer) */

.bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.bg-elements .bg-el {
    position: absolute;
    will-change: transform, opacity;
}

.bg-elements .banner-left {
    left: -6%;
    top: 2%;
    width: 34%;
    transform: rotate(-4deg);
    z-index: 3;
}

.bg-elements .banner-right {
    right: -6%;
    top: 2%;
    width: 34%;
    transform: scaleX(-1) rotate(6deg);
    z-index: 3;
}

.bg-elements .leaf-left {
    left: 4%;
    top: 28%;
    width: 20%;
    opacity: 0.98;
    transform: rotate(-6deg);
    z-index: 3;
}

.bg-elements .leaf-right {
    right: 6%;
    top: 6%;
    width: 30%;
    opacity: 0.98;
    transform: rotate(6deg) scaleX(-1);
    z-index: 3;
}

.bg-elements .fish-left {
    /* place near bottom-right to match poster */
    right: 4%;
    left: auto;
    bottom: 6%;
    width: 8%;
    opacity: 0.95;
    transform: rotate(6deg);
    z-index: 4;
}

.bg-elements .footer-bg {
    left: 50%;
    bottom: -2%;
    transform: translateX(-50%);
    width: 140%;
    opacity: 1;
    z-index: 1;
}

.bg-elements .coral {
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    width: 120%;
    opacity: 0.98;
    z-index: 2;
}

@media (max-width:720px) {
    .bg-elements .banner-left,
    .bg-elements .banner-right {
        width: 28%;
        top: 4%;
    }
    .bg-elements .leaf-left,
    .bg-elements .leaf-right,
    .bg-elements .fish-left {
        display: none;
    }
    .bg-elements .footer-bg,
    .bg-elements .coral {
        width: 110%;
    }
}

.content {
    position: relative;
    z-index: 3;
    padding: 60px 36px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.brand {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6
}

.hosting {
    font-family: Montserrat, sans-serif;
    color: var(--white);
    font-weight: 900;
    font-size: clamp(64px, 8.5vw, 180px);
    line-height: 0.82;
    margin: 0 0 6px 0;
    text-shadow: 0 26px 48px rgba(0, 0, 0, 0.6)
}

.soon-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    position: relative
}

.ribbon {
    background: var(--ribbon);
    color: #fff;
    padding: 12px 46px;
    font-weight: 900;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.6);
    font-family: Montserrat;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 8
}

.ribbon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 8px;
    border: 3px solid #fff;
    pointer-events: none
}

.soon {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px
}

.s-letter,
.n-letter {
    font-family: Montserrat;
    color: var(--accent);
    font-weight: 900;
    font-size: clamp(64px, 10vw, 160px);
    text-shadow: 0 22px 40px rgba(0, 0, 0, 0.5)
}

.o-letter {
    width: clamp(84px, 10vw, 170px);
    height: clamp(84px, 10vw, 170px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd200 0%, var(--accent) 60%);
    /* subtle inner ring instead of bright border */
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), inset 0 -6px 14px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.o-letter .o-inner {
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.o-letter img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
}

.exclaim {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 6px
}

.exclaim .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45)
}

.subline {
    margin-top: 14px;
    color: #f6f8fb;
    font-size: 14px
}

.services {
    margin-top: 18px;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff
}

.cta {
    margin-top: 18px;
    display: inline-block;
    background: linear-gradient(90deg, #ffd200, #ffb700);
    color: #111;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    font-size: 16px
}

.countdown {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    justify-content: center;
    align-items: center
}

.count-item {
    background: rgba(255, 255, 255, 0.06);
    padding: 12px 18px;
    border-radius: 12px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4)
}

.count-value {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    color: var(--accent);
    font-size: 22px
}

.count-label {
    font-size: 11px;
    color: #eef2ff;
    margin-top: 6px
}

.countdown .launched {
    background: linear-gradient(90deg, #ffd200, #ffb700);
    padding: 10px 20px;
    border-radius: 12px;
    color: #111;
    font-weight: 900
}

.footnote {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    color: #fff8;
    font-size: 12px
}

@media (max-width:1200px) {
    .hosting {
        font-size: clamp(56px, 9vw, 140px)
    }
    .s-letter,
    .n-letter {
        font-size: clamp(48px, 9vw, 120px)
    }
    .o-letter {
        width: clamp(72px, 9vw, 140px);
        height: clamp(72px, 9vw, 140px)
    }
}

@media (max-width:900px) {
    .hosting {
        font-size: clamp(48px, 9vw, 110px)
    }
    .o-letter {
        width: clamp(56px, 12vw, 110px);
        height: clamp(56px, 12vw, 110px)
    }
    .ribbon {
        font-size: 16px;
        padding: 8px 26px;
        top: 30%
    }
}

@media (max-width:720px) {
    .brand .logo {
        font-size: 22px
    }
    .hosting {
        font-size: 36px
    }
    .s-letter,
    .n-letter {
        font-size: clamp(32px, 8vw, 64px)
    }
    .o-letter {
        width: 64px;
        height: 64px
    }
    .content {
        padding: 28px
    }
    /* make hero flexible on small screens */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-bottom: 20px;
    }
    /* tone down decorative elements on small devices */
    .bg-elements {
        display: none;
    }
    .bg-decor .bg-flower {
        display: none;
    }
    /* place the footnote under the content on mobile */
    .footnote {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 18px;
        text-align: center;
        z-index: 3;
    }
    /* add extra bottom padding so footnote is not clipped by viewport */
    .content {
        padding-bottom: 60px;
    }
}

@media (max-width:480px) {
    .bg-decor .bg-flower {
        display: none
    }
    .brand .logo {
        font-size: 18px
    }
    .hosting {
        font-size: 24px
    }
    .o-letter {
        width: 48px;
        height: 48px
    }
    .s-letter,
    .n-letter {
        font-size: 28px;
        line-height: 1;
    }
    .content {
        padding: 20px
    }
    .soon {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .subline {
        font-size: 13px;
        margin-top: 8px;
    }
    .services {
        font-size: 13px;
        line-height: 1.5;
        padding: 0 8px;
    }
    .cta {
        font-size: 18px;
        padding: 10px 18px;
        margin-top: 14px;
    }
    .countdown {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .count-item {
        min-width: 56px;
        padding: 8px 10px
    }
    .count-value {
        font-size: 16px
    }
    /* ensure page can scroll and elements remain readable */
    .ribbon {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin-top: 8px;
        display: inline-block;
        padding: 8px 18px;
        font-size: 14px;
    }
    .footnote {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 20px;
        text-align: center;
        padding: 0 12px;
        z-index: 3;
        font-size: 12px;
    }
}