*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Poppins,sans-serif;
background:linear-gradient(135deg,#f8f1ff,#f3ddff,#fff7ff);
color:#45146b;
overflow-x:hidden
}
.container{width:min(1240px,92%);margin:auto}
.nav{
position:sticky;top:0;z-index:999;
background:rgba(255,255,255,.75);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(126,34,206,.1)
}
.nav-inner{
height:90px;
display:flex;
justify-content:space-between;
align-items:center
}
.brand{
display:flex;
align-items:center;
gap:16px
}
.brand img{
width:90px;
border-radius:14px;
background:#fff;
padding:6px
}
.brand h3{
font-size:28px;
color:#6b21a8
}
.brand p{
color:#7e22ce;
font-weight:600
}
.links{
display:flex;
gap:12px
}
.links a{
text-decoration:none;
background:#fff;
padding:12px 20px;
border-radius:999px;
color:#6b21a8;
font-weight:700;
box-shadow:0 10px 25px rgba(126,34,206,.08)
}
.hero{
padding:90px 0
}
.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center
}
.hero-copy{
background:rgba(255,255,255,.72);
padding:55px;
border-radius:40px;
box-shadow:0 25px 70px rgba(126,34,206,.12)
}
.tag{
display:inline-block;
background:#efd4ff;
padding:10px 18px;
border-radius:999px;
font-weight:800;
color:#7e22ce;
margin-bottom:20px
}
.hero h1{
font-size:72px;
line-height:.95;
letter-spacing:-3px;
color:#6b0fa5;
margin-bottom:20px
}
.hero p{
font-size:18px;
line-height:1.9;
color:#6f5579
}
.cta{
display:flex;
gap:16px;
margin-top:28px;
flex-wrap:wrap
}
.btn{
display:inline-flex;
padding:14px 22px;
border-radius:16px;
text-decoration:none;
font-weight:800
}
.primary{
background:linear-gradient(135deg,#7e22ce,#d946ef);
color:#fff
}
.secondary{
background:#fff;
color:#7e22ce;
border:2px solid #e879f9
}
.white{
background:#fff;
color:#7e22ce
}
.ghost{
border:2px solid rgba(255,255,255,.3);
color:#fff
}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:28px
}
.stats div{
background:#fff;
padding:18px;
border-radius:18px
}
.stats strong{
display:block;
font-size:28px;
color:#7e22ce
}
.hero-image img{
border-radius:34px;
box-shadow:0 25px 70px rgba(126,34,206,.16)
}
.section{
padding:90px 0
}
.section-title{
margin-bottom:40px
}
.section-title span{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:#efd4ff;
font-weight:800;
color:#7e22ce;
margin-bottom:16px
}
.section-title h2{
font-size:54px;
line-height:1;
color:#6b0fa5
}
.cards,.cot-grid,.management-grid,.footer-grid{
display:grid;
gap:22px
}
.cards{
grid-template-columns:repeat(3,1fr)
}
.card,.cot-card,.leader{
background:rgba(255,255,255,.75);
padding:28px;
border-radius:28px;
box-shadow:0 18px 50px rgba(126,34,206,.08)
}
.card h3,.cot-card h3{
margin-bottom:12px;
color:#6b21a8
}
.purple{
background:linear-gradient(135deg,#4c1d95,#7e22ce,#d946ef)
}
.white h2,.white span{
color:#fff
}
.white span{
background:rgba(255,255,255,.15)
}
.cot-grid{
grid-template-columns:repeat(3,1fr)
}
.cot-card{
background:rgba(255,255,255,.1);
color:#fff;
border:1px solid rgba(255,255,255,.15)
}
.management-grid{
grid-template-columns:repeat(5,1fr)
}
.main{
grid-column:span 2
}
.avatar{
width:80px;
height:80px;
border-radius:24px;
background:linear-gradient(135deg,#7e22ce,#d946ef);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-weight:900;
font-size:28px;
margin-bottom:18px
}
.expert-layout,.location-grid,.apps-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center
}
.expert-preview img,.map iframe{
width:100%;
border-radius:28px;
box-shadow:0 20px 60px rgba(126,34,206,.12)
}
.apps{
background:linear-gradient(135deg,#581c87,#7e22ce,#c026d3);
color:#fff
}
.apps h2{
font-size:56px;
line-height:1
}
.phone{
background:#fff;
padding:40px;
border-radius:40px;
text-align:center;
color:#581c87
}
.phone img{
width:220px;
margin:auto;
border-radius:20px
}
.white-tag{
background:rgba(255,255,255,.18);
color:#fff
}
.map iframe{
height:420px;
border:0
}
.footer{
background:#14031f;
padding:60px 0;
color:#fff
}
.footer-grid{
grid-template-columns:1.5fr 1fr 1fr
}
.footer img{
width:150px;
background:#fff;
padding:8px;
border-radius:16px;
margin-bottom:16px
}
.footer a{
display:block;
color:#e9d5ff;
text-decoration:none;
margin:8px 0
}
@media(max-width:980px){
.hero-grid,.cards,.cot-grid,.management-grid,.expert-layout,.apps-grid,.location-grid,.footer-grid{
grid-template-columns:1fr
}
.hero h1,.apps h2,.section-title h2{
font-size:42px
}
.links{
display:none
}
}