:root{
--bg:#EBDFFF;
--panel:#F2E8FF;
--accent:#3D0B5A;
--accent-2:#5D2B9E;
--text:#1F1B2E;
--muted:#5C4B66;
--button-bg:linear-gradient(180deg,#3b0b5a,#2b063d);
--container-max:1300px;
}

html,body{
height:100%;
margin:0;
font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}


.wrap{
max-width:var(--container-max);
margin:0 auto;
padding:48px 28px;
box-sizing:border-box;
}


.logo{
display:flex;
justify-content:center;
margin-bottom:24px;
align-items:center;
gap:12px;
}
.logo .mark{
width:72px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
}
.logo .text{
font-family:"Montserrat",sans-serif;
font-weight:700;
font-size:18px;
color:var(--accent-2);
letter-spacing:0.2px;
}
.logo small{
display:block;
font-size:11px;
color:var(--muted);
margin-top:2px;
font-weight:600;
}


.hero{
display:grid;
grid-template-columns: 1fr 420px;
gap:40px;
align-items:center;
padding:24px 12px 60px 12px;
}


.hero h1{
margin:0 0 22px 0;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 55px;
color: var(--accent);
line-height: 0.95;
letter-spacing: -1px;
}


.hero11 h1{
margin:0 0 22px 0;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 60px;
color: var(--accent);
line-height: 0.95;
letter-spacing: -1px;
}


.left{
padding-right:20px;
}


.features{
display:flex;
flex-direction:column;
gap:20px;
margin-bottom:24px;
}
.feature{
display:flex;
align-items:center;
gap:18px;
font-weight:600;
font-size:25px;
color:var(--text);
font-family:"Poppins",sans-serif;
}
.feature .ico{
font-size:25px;
width:35px;
text-align:left;
line-height:1;
}


.desc{
margin-top:18px;
font-size:18px;
line-height:1.7;
color:#2b2633;
max-width:760px;
font-weight:400;
}
.desc b{ font-weight:700; }


.right{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
justify-self:center;
}


.stars{
letter-spacing:0px;
font-size:32px;
color:var(--accent);
}


.buy-wrap{
margin-top:10px;
width:100%;
display:flex;
justify-content:center;
}
.btn-buy{
display:inline-block;
background:var(--button-bg);
padding:18px 44px;
border-radius:40px;
color:#fff;
font-weight:700;
font-family:"Montserrat",sans-serif;
text-decoration:none;
box-shadow:0 10px 24px rgba(61,11,90,0.18);
border:3px solid rgba(255,255,255,0.06);
transition:transform .15s ease, box-shadow .15s ease;
font-size:18px;
letter-spacing:0.2px;
}
.btn-buy:active,
.btn-buy:focus{ transform:translateY(1px) }


.right .decor{
width:100%;
display:flex;
justify-content:center;
margin-top:-6px;
}


@media (max-width:1100px){
.hero{ grid-template-columns:1fr 360px; gap:28px }
.hero h1{ font-size:72px; }

.hero11 h1{ font-size:35px; text-align: center;}
}
@media (max-width:900px){
.wrap{ padding:28px 18px; }
.hero{ grid-template-columns:1fr; gap:22px; text-align:center; }
.left{ order:2; padding-right:0; }
.right{ order:1; }
.hero h1{ font-size:48px; margin-top:6px; }
.features{ align-items:center }
.feature{ font-size:18px }
.desc{ margin-left:auto; margin-right:auto; font-size:16px; max-width:680px; text-align:left; }
.btn-buy{ padding:14px 36px; font-size:16px; }
}

@media (max-width:420px){
.hero h1{ font-size:36px; }
.feature{ font-size:16px; gap:12px }
.desc{ font-size:15px; line-height:1.6; }
}


.hero11{
padding: 13px 11px 10px 70px;
}

.hero{
margin-top: -40px;
}



.footer-section {
max-width: 100%;
background: #fff; font-size:13px;
margin: 0px auto;
padding: 50px 150px;
}


@media only screen and (max-width: 768px) {
.hero11 {
padding: 15px;
}

.btn-buy {
margin-top: -20px;
}

.feature .ico{
font-size:15px;
width:30px;
}


.feature {
font-size: 18px;
text-align: left;
line-height: 0.8;
gap: 12px;
align-items: start !important;
}

.footer-section {
padding: 20px 20px; font-size: 12px; }

}

@media (max-width: 900px) {
.features {
align-items: start !important;
}
}

hr{
width: 150px;
border-color: #8e8e8e;
}