/* ──────────────────────────────────────────────────────────────────────────
 * sportassistantmanager.com — styles (ported from the React styled-components)
 * ────────────────────────────────────────────────────────────────────────── */
:root{
	--bg:#FAFBFD; --grey:#F2F2F2; --darkGrey:#DADADA; --darkerGrey:#C1C1C1;
	--blue:#30639a; --lightBlue:#2977CC; --text:#293134; --textLight:#5E5E5E;
	--orange:#f2a51d; --lightOrange:#ffb300;
	--huge:2.8rem; --big:2.3rem; --medium:1.3rem; --normal:1rem;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Poppins',system-ui,Arial,sans-serif;line-height:1.5}
img{user-select:none;-webkit-user-drag:none}
a{color:inherit}
p{font-size:var(--normal)}
ul{padding-left:1.1rem}
section{padding-top:60px;margin-top:-60px}            /* anchor offset */
body.is-inner main{padding-top:90px}
body.menu-open{overflow:hidden}

/* ───────── buttons ───────── */
.btn{display:inline-block;padding:12px 20px;border:none;border-radius:50px;background:var(--bg);
	color:var(--text);text-decoration:none;text-align:center;cursor:pointer;transition:.3s ease all;word-break:keep-all;
	box-shadow:0 1px 5.3px rgba(0,0,0,.036),0 1.9px 10px rgba(0,0,0,.045),0 6.3px 33.4px rgba(0,0,0,.065),0 15px 80px rgba(0,0,0,.09)}
.btn:hover{background:var(--darkGrey)}
.btn-orange{background:var(--orange)}
.btn-orange:hover{background:var(--lightOrange)}
.btn-blue{background:var(--blue);color:var(--grey)}
.btn-blue:hover{background:var(--lightBlue)}

/* ───────── nav ───────── */
.nav{position:fixed;top:0;left:0;width:100%;height:100px;padding:10px 5vw;display:flex;
	justify-content:space-between;align-items:center;z-index:10;transition:.3s ease all}
.nav .logo{display:block}
.nav .logo img{margin:10px}
.nav .logo-w,.nav .logo-b{display:none}      /* hide both, then show exactly one */
.nav.home .logo-w{display:block}             /* over hero: white */
.nav.home.scrolled .logo-w{display:none}
.nav.home.scrolled .logo-b{display:block}    /* scrolled: blue */
.nav.solid .logo-b{display:block}            /* inner page: blue */

.nav.home.scrolled,.nav.solid{height:80px;padding:0 5vw;background:var(--bg);box-shadow:0 5px 8px rgba(0,0,0,.1)}

.navlist{display:flex;align-items:center;justify-content:space-between;list-style:none;margin:0 0 0 auto;padding:0}
.navlist li{margin-right:30px}
.navlist li:last-child{margin-left:10px;margin-right:0}
.navlist a.link{position:relative;color:#fff;text-decoration:none;font-size:var(--normal);transition:.3s all ease-in-out}
.navlist a.link::before{content:'';position:absolute;bottom:-2px;right:0;width:0;height:1px;background:#fff;transition:.3s all ease-in-out}
.navlist a.link:hover::before{width:100%;right:auto;left:0}
.navlist .fb{display:flex;color:#fff}
.nav.home.scrolled .navlist a.link,.nav.solid .navlist a.link{color:var(--text)}
.nav.home.scrolled .navlist a.link::before,.nav.solid .navlist a.link::before{background:var(--text)}
.nav.home.scrolled .navlist .fb,.nav.solid .navlist .fb{color:var(--text)}

.lang-wrap{display:flex;align-items:center}
.lang-wrap .divider{width:1px;height:24px;background:#fff;opacity:.5;margin-right:18px}
.nav.home.scrolled .lang-wrap .divider,.nav.solid .lang-wrap .divider{background:var(--text)}
.lang{position:relative}
.lang-cur{background:none;border:none;color:#fff;font:inherit;cursor:pointer;display:flex;align-items:center;gap:4px}
.nav.home.scrolled .lang-cur,.nav.solid .lang-cur{color:var(--text)}
.lang-menu{position:absolute;right:0;top:130%;background:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.15);
	list-style:none;margin:0;padding:6px 0;min-width:64px;display:none;z-index:20}
.lang:hover .lang-menu{display:block}
.lang-menu li a{display:block;padding:6px 16px;color:var(--text);text-decoration:none}
.lang-menu li a:hover{background:var(--grey)}
.lang-menu li.on a{font-weight:800;color:var(--blue)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:30}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.3s}
.nav.home.scrolled .burger span,.nav.solid .burger span{background:var(--text)}

/* ───────── landing / hero ───────── */
.landing{position:relative;height:106vh;width:100%;display:flex;align-items:center;color:#fff;padding:0 5%;
	margin-bottom:100px;background-position:center;background-size:cover;background-repeat:no-repeat;
	background-image:linear-gradient(180deg,rgba(48,99,154,1) 0%,rgba(48,99,154,.8) 100%),url(/images/header-bg.jpg)}
.landing::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:25vh;z-index:0;
	background:url(/images/border-bottom.svg) center/cover no-repeat}
.landing-info{position:relative;z-index:2;max-width:46%}
.landing-title{font-size:var(--huge);font-weight:800;max-width:700px;margin:.2em 0}
.landing-sub{max-width:600px;font-size:var(--normal)}
.landing-phones{position:absolute;right:0;top:120px;width:55%;height:80%;overflow:hidden;z-index:1;pointer-events:none}
.landing-phones img{position:absolute;right:40px;top:0;height:100%;width:auto}

/* ───────── features ───────── */
.features{display:flex;flex-direction:column;align-items:center;position:relative;margin-bottom:100px}
.sec-title{font-size:var(--huge);font-weight:800;text-align:center;margin:.3em 0}
.feature{display:flex;justify-content:space-around;align-items:center;width:80%;margin-bottom:80px;gap:30px}
.feature.reversed{flex-direction:row-reverse}
.feature:last-child{margin-bottom:0}
.feature-img{position:relative;text-align:center}
.feature-img img{width:520px;max-width:100%;height:auto;pointer-events:none}
.feature-info{max-width:40%;display:flex;flex-direction:column;justify-content:center}
.feature-info h2{font-size:var(--big);font-weight:800;margin:.2em 0}
.feature-info ul{margin:0 auto 0 0}
.feature-info li{margin:.35em 0}
.feature-info .btn{margin-top:14px;align-self:flex-start}
.feat-circle{position:absolute;top:500px;left:-150px;width:750px;height:750px;border-radius:500px;
	border:150px solid rgba(41,119,204,.14);z-index:-1}

/* ───────── price ───────── */
.price{display:flex;flex-direction:column;align-items:center;margin-bottom:100px}
.price .sec-title{margin-bottom:30px}
.pricing{width:50%;max-width:1000px;margin:75px 0 30px;border-radius:10px;font-size:.9rem;
	box-shadow:0 0 16px 0 rgba(55,55,55,.12)}
.pt-headers{display:flex;border-radius:10px 10px 0 0;color:var(--text)}
.pt-headers>div{flex:1 1 33.4%;display:flex;justify-content:center;align-items:center;text-align:center;
	padding:20px 0;border:1px solid var(--grey);background:var(--bg)}
.pt-headers>div:first-child{border-radius:10px 0 0 0}
.pt-headers>div.prem{flex-direction:column;border-radius:0 10px 0 0}
.pt-headers .crown{color:var(--orange);margin-bottom:8px}
.pt-body{display:flex;flex-direction:column}
.pt-row{display:flex;text-align:center}
.pt-row>div{flex:1 1 33.4%;display:flex;justify-content:center;align-items:center;padding:10px 20px;border-left:1px solid var(--grey)}
.pt-row>div:first-child{display:block;text-align:left}
.pt-row>div:nth-child(1),.pt-row>div:nth-child(3){background:rgba(239,239,239,.3)}
.pt-row:nth-child(even){background:#fff}
.pt-row:nth-child(odd){background:var(--bg)}
.pt-check{height:17px}
.pt-row.pt-foot>div{padding:18px 10px}
.pt-dl{display:block;padding:12px 20px;background:var(--blue);border-radius:50px;color:var(--grey);text-decoration:none;
	box-shadow:0 1px 5.3px rgba(0,0,0,.036),0 1.9px 10px rgba(0,0,0,.045)}
.pt-prices{font-size:.68rem;white-space:nowrap;display:flex;flex-direction:column;align-items:center}
.pt-prices b{margin-bottom:6px}                      /* "Prices:" on its own row, above the table */
.pt-prices table.a22{margin:0 auto}
.pt-prices table.a22 td{white-space:nowrap;vertical-align:top;padding:0 3px}
.price-desc{display:flex;justify-content:center;margin-top:10px}
.price-text{max-width:50%;text-align:center;margin:0 auto}

/* ───────── download ───────── */
.download{position:relative;height:70vh;width:100%;display:flex;flex-direction:row-reverse;align-items:center;
	color:#fff;padding-right:7%;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;
	background-image:linear-gradient(180deg,rgba(48,99,154,1) 0%,rgba(48,99,154,.8) 100%),url(/images/download-bg.png)}
.dl-phones{position:absolute;left:0;top:-13%;width:100%;height:126%;overflow:hidden;z-index:1;pointer-events:none}
.dl-phones img{position:absolute;left:0;top:0;height:100%;width:auto}
.dl-info{position:relative;z-index:2;max-width:35%;display:flex;flex-direction:column}
.dl-info h1{font-size:var(--huge);font-weight:800;margin:0 0 10px}
.dl-badges{display:flex;gap:10px;margin-top:30px}
.dl-badges img{max-height:50px;height:auto}
.dl-circle{position:absolute;right:0;bottom:0;z-index:0;width:375px;height:375px;overflow:hidden}
.dl-circle span{position:absolute;top:0;left:0;width:750px;height:750px;border-radius:500px;border:150px solid rgba(255,255,255,.05)}

/* ───────── about ───────── */
.about{display:flex;flex-direction:column;align-items:center;margin-bottom:120px;position:relative}
.about-text{max-width:50%;text-align:center}
.about-circle{position:absolute;top:300px;right:-150px;width:600px;height:600px;border-radius:500px;
	border:120px solid rgba(41,119,204,.1);z-index:-1}
.about-reviews-title{font-size:var(--big);font-weight:800;text-align:center;margin-top:40px}
.reviews{max-width:640px;width:90%;text-align:center}
.testi{display:none;font-size:1.05rem;font-style:italic;color:var(--textLight);min-height:120px;margin:0;padding:10px 20px}
.testi.on{display:block}
.reviews-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.reviews-dots .dot{width:9px;height:9px;border-radius:50%;border:none;background:var(--darkGrey);cursor:pointer;padding:0}
.reviews-dots .dot.on{background:var(--blue)}

/* ───────── legal / 404 ───────── */
.legal{max-width:760px;margin:0 auto;padding:40px 5vw 80px}
.legal h1{font-size:var(--big);font-weight:800}
.legal .btn{margin:10px 0}

/* ───────── footer ───────── */
.footer{display:flex;justify-content:center;align-items:center;gap:25px;padding:30px;background:transparent;position:relative;z-index:1}
.footer.bg{background:#fff}
.footer a{color:var(--text);text-decoration:underline}

/* ───────── WhatsApp support FAB ───────── */
.wa-fab{position:fixed;left:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
	background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;
	box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.2s ease;animation:wa-pop .4s ease}
.wa-fab:hover{background:#1ebe5d;transform:scale(1.07)}
.wa-fab svg{width:34px;height:34px;fill:#fff}
@keyframes wa-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:768px){.wa-fab{left:14px;bottom:14px;width:52px;height:52px}.wa-fab svg{width:30px;height:30px}}

/* ───────── responsive ───────── */
@media (max-width:1250px){
	.nav{padding:10px 20px}
	.navlist *{font-size:.85rem}
	.dl-info{max-width:42%}
}
@media (max-width:992px){
	.burger{display:flex}
	body.menu-open .nav .logo-w{display:none}    /* on the white menu overlay: blue logo */
	body.menu-open .nav .logo-b{display:block}
	.navlist{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:8px;background:#fff;
		transform:translateX(100%);transition:.3s ease;margin:0;padding:0}
	body.menu-open .navlist{transform:translateX(0)}
	.navlist li{margin:0;padding:14px 0;text-align:center}
	.navlist a.link{color:var(--text)!important}
	.navlist .fb{color:var(--text);justify-content:center}
	.lang-wrap{justify-content:center;margin-top:10px}
	.lang-wrap .divider{display:none}
	.lang-cur{color:var(--text)}
	.lang-menu{position:static;display:block;box-shadow:none;text-align:center}
	.landing-phones,.dl-phones{display:none}
	.landing-info{max-width:100%}
	.dl-info{max-width:100%}
}
@media (max-width:768px){
	:root{--huge:2rem;--big:1.6rem}
	.landing{height:auto;padding:100px 5% 50px}
	.landing::after{display:none}
	.feature{flex-direction:column-reverse;width:92%}
	.feature.reversed{flex-direction:column-reverse}
	.feature-info{max-width:100%}
	.feature-info h2{text-align:center}
	.pricing{width:95%}
	.price-text,.about-text{max-width:85%}
	.download{height:auto;padding:14% 5%}
	.footer{padding:20px}
}