@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100%}
body{font-family:'Open Sans', sans-serif;background:#02070e;color:#fff}
.coming-soon-page{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.background-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0px;z-index:-3}
.bg-panel{position:relative;background-image:url("images/pickleball-bg.jpg");background-size:cover;background-position:center;}
.bg-panel-1{background-position:25% center}.bg-panel-2{background-position:75% center}.bg-panel-3{background-position:35% center}.bg-panel-4{background-position:70% center}
.bg-panel-1 {
    background-image: url("images/photo-1.jpg");
}

.bg-panel-2 {
    background-image: url("images/photo-2.jpg");
}

.bg-panel-3 {
    background-image: url("images/photo-3.jpg");
}

.bg-panel-4 {
    background-image: url("images/photo-4.jpg");
}
.page-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.68) 45%,rgba(0,0,0,.72))}
.page-overlay:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 10%,rgba(0,0,0,.22) 100%)}
.coming-soon-content{position:relative;width:min(100%,1250px);margin:0 auto;padding:clamp(55px,8vh,90px) 25px 30px;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center}
.hero-section{width:100%}
.launch-text{font-size:clamp(20px,2.1vw,34px);font-weight:400;letter-spacing:1px;line-height:1.25;margin-bottom:15px}
.official-text{font-size:clamp(22px,2.5vw,38px);font-weight:700;letter-spacing:1.5px;line-height:1.2;margin-bottom:10px}
.hero-section h1{font-size:clamp(62px,8vw,125px);font-weight:900;line-height:.95;letter-spacing:1px;color:#fff;text-transform:uppercase}
.player-title {
    padding: 8px 10px;
    width: calc(100% - 40px);
    max-width: 933px;
    
    font-size: clamp(19px, 2.2vw, 28px);
    font-weight: 500;
    letter-spacing: clamp(5px, 0.8vw, 12px);

    color: #082449;
    background: rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
margin: 0 auto;
}

.divider{width:min(430px,65%);height:3px;background:#fff;margin:28px auto 25px;position:relative}
.divider:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.contact-section{display:flex;flex-direction:column;align-items:center;gap:18px}
.social-icons{display:flex;justify-content:center;gap:20px}
.social-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#071a35;text-decoration:none;font-size:21px;transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease}
.social-icon:hover{transform:translateY(-6px) scale(1.08);background:#071a35;color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.45)}
.social-icon i{transition:transform .3s ease}.social-icon:hover i{transform:scale(1.15)}
.email-button{display:inline-flex;align-items:center;min-height:65px;padding:8px 25px 8px 8px;gap:13px;border-radius:18px;background:#fff;color:#071a35;text-decoration:none;font-size:17px;font-weight:500;box-shadow:0 8px 25px rgba(0,0,0,.3);transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.email-button:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.45);background:#f4f8fc}
.email-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#071a35;color:#fff;font-size:20px;transition:transform .3s ease,background .3s ease}
.email-button:hover .email-icon{transform:rotate(-8deg) scale(1.08);background:#0b315d}
.email-text{white-space:nowrap}
.brand-section{margin-top:25px;display:flex;align-items:center;justify-content:center;gap:22px;min-height:150px}
.brand-logo{display:flex;align-items:center;justify-content:center}
.brand-logo img{width:clamp(70px,8vw,125px);max-height:145px;object-fit:contain;filter:brightness(0) invert(1);}
.brand-name{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(42px,5vw,72px);line-height:.92;font-weight:800;letter-spacing:-1px}
.site-footer{position:relative;width:100%;min-height:70px;padding:18px 8%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#020d20;color:#fff;font-size:16px;z-index:5}
.designer strong, strong a {font-weight:700; color: #fff; text-decoration:none;}
strong a:hover {font-weight:700; color: #7c7c7c;}
@media(max-width:900px){.coming-soon-content{padding-top:55px}.hero-section h1{font-size:clamp(55px,10vw,90px)}.player-title{letter-spacing:5px}.site-footer{padding-left:30px;padding-right:30px}}
@media(max-width:767px){.page-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg, rgb(0 0 0 / 47%), rgb(0 0 0 / 15%) 45%, rgb(0 0 0 / 32%))} .background-grid{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}.bg-panel{display:none}.bg-panel-1{display:block;background-position:center;transform:scale(1.02)}.coming-soon-content{padding:55px 18px 30px}.launch-text{font-size:18px;letter-spacing:.5px;margin-bottom:14px}.official-text{font-size:19px;letter-spacing:.8px;margin-bottom:12px}.hero-section h1{font-size:clamp(45px,14vw,75px);letter-spacing:-1px;line-height:.95}.player-title{font-size:12px;letter-spacing:2px;padding:10px 6px;margin-top:20px}.divider{width:60%;margin-top:25px;margin-bottom:22px}.social-icons{gap:16px}.social-icon{width:44px;height:44px;font-size:19px}.email-button{width:auto;max-width:100%;min-height:58px;padding-right:18px;font-size:14px;border-radius:16px}.email-icon{width:43px;height:43px;font-size:17px}.email-text{overflow:hidden;text-overflow:ellipsis}.brand-section{gap:14px;margin-top:25px;min-height:110px}.brand-logo img{width:65px}.brand-name{font-size:39px}.site-footer{flex-direction:column;justify-content:center;text-align:center;gap:7px;padding:16px 15px;min-height:85px;font-size:12px}}
@media(max-width:380px){.coming-soon-content{padding-left:14px;padding-right:14px}.launch-text{font-size:16px}.official-text{font-size:17px}.hero-section h1{font-size:42px}.player-title{font-size:12px;letter-spacing:2px}.email-button{font-size:12px}.brand-name{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
