body{

margin:0;
padding:0;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;

background-image:url("https://gnosis.occclav.com/content/images/size/w1000/2026/03/fon-3.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

color:#222;

display:flex;
justify-content:center;
align-items:center;

min-height:100vh;

}

.container{

width:100%;
padding:20px;

display:flex;
justify-content:center;

}

.card{

background-image:url("https://gnosis.occclav.com/content/images/2026/03/fon_pisma-1.png");
background-size:cover;
background-position:center;

max-width:520px;
width:100%;

padding:55px 36px;

border-radius:18px;

box-shadow:0 30px 80px rgba(0,0,0,0.25);

text-align:center;

}

.logo{

margin-bottom:20px;

}

.logo img{

width:70px;
height:auto;

opacity:0.95;

}

h1{

margin:0 0 6px 0;
font-size:34px;

}

.title-sub{

font-size:14px;
opacity:0.7;
margin-bottom:18px;

}

.subtitle{

opacity:.85;
line-height:1.6;
margin-bottom:30px;

}

.services-title{

margin-top:20px;
margin-bottom:20px;

font-size:14px;
letter-spacing:3px;
font-weight:600;

position:relative;

}

.services-title:after{

content:"";
display:block;

width:70px;
height:2px;

background:#b89b5e;

margin:12px auto 0;

}

.services-intro{

font-size:14px;
line-height:1.7;
opacity:0.85;

margin-bottom:28px;
text-align:center;

}

.services{

text-align:left;
margin-bottom:35px;

}

.service{

margin-bottom:24px;
padding-bottom:18px;

border-bottom:1px solid rgba(0,0,0,0.08);

}

.service:last-child{

border-bottom:none;

}

.service-title{

font-size:16px;
font-weight:600;
margin-bottom:6px;

}

.service-text{

font-size:14px;
line-height:1.7;
opacity:0.9;

}

.links{

display:flex;
flex-direction:column;
gap:14px;

}

.links a{

text-decoration:none;

padding:15px;

border-radius:12px;

background:#f2efe6;

color:#333;

font-weight:600;

transition:all .25s;

}

.links a:hover{

background:#e7e1cf;
transform:translateY(-2px);

}

.footer{

margin-top:35px;

font-size:12px;
opacity:.6;
letter-spacing:2px;

}

@media (max-width:600px){

body{
background-attachment:scroll;
}

.card{
padding:40px 24px;
}

.logo img{
width:56px;
}

h1{
font-size:28px;
}

}

.cta{

margin-top:30px;
margin-bottom:30px;

}

.cta a{

display:block;

text-decoration:none;

padding:18px;

font-size:16px;
font-weight:600;

border-radius:14px;

background:#b89b5e;
color:white;

box-shadow:0 10px 30px rgba(0,0,0,0.25);

transition:all .25s;

}

.cta a:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(0,0,0,0.35);

}


.epigraph{

font-size:14px;
font-style:italic;

opacity:0.8;

margin-bottom:12px;

}

.directions{

font-size:13px;

letter-spacing:1px;

opacity:0.75;

margin-bottom:20px;

}

.links{

display:flex;
flex-direction:column;
gap:12px;

margin-top:10px;

}

.card{

animation:cardFade 0.9s ease;

}

@keyframes cardFade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}


/* Анимация появления карточки после загрузки фона */

.card{

opacity:0;

animation:cardAppear 1.4s ease forwards;

animation-delay:1s;

}

@keyframes cardAppear{

from{

opacity:0;
transform:translateY(25px);
filter:blur(4px);

}

to{

opacity:1;
transform:translateY(0);
filter:blur(0);

}

}


.share{

margin-top:20px;

}

.share button{

padding:12px 16px;

border-radius:10px;

border:none;

background:#e9e4d3;

font-size:14px;

cursor:pointer;

transition:all .2s;

}

.share button:hover{

background:#ded7c3;

}

body{

animation:bgMove 30s linear infinite alternate;

}

@keyframes bgMove{

from{

background-position:center top;

}

to{

background-position:center bottom;

}

}



.card{

position:relative;

}



h1{
position:relative;
}

h1:after{

content:"";

display:block;

width:80px;
height:2px;

margin:14px auto 18px auto;

background:#b89b5e;

border-radius:2px;

}