:root{

--cream:#F6F1E8;
--white:#FFFFFF;
--navy:#0F1C3F;
--blue:#adc5f3;
--navy-light:#1E2F63;

--gold:#C8A46B;
--gold-light:#E6C896;

--beg:#ecd5ad;

--green:#74c38f;

--text:#1F2430;
--text-light:#6B7280;

}

/*********************
PAGE
*********************/
.article-page{
background:var(--cream);
padding:70px 20px;
}

.seo-article{
max-width:1100px;
margin:auto;
background:var(--white);
padding:70px;
border-radius:24px;
box-shadow:0 20px 60px rgba(15,28,63,.08);
}

/*********************
TEXT
*********************/
h2{
margin-top:20px;
margin-bottom:25px;
font-size:2rem;
color:var(--navy);
position:relative;
padding-left:18px;
}

h2::before{
content:"";
position:absolute;
left:0;
top:6px;
height:80%;
width:5px;
background:var(--gold);
border-radius:20px;
}

h3{
font-size:1.25rem;
color:var(--navy);
margin-bottom:15px;
}

p{
line-height:1.95;
margin-bottom:22px;
font-size:1.08rem;
color:var(--text);
}

strong{
color:var(--navy);
}

.article-ul{
padding-left:28px;
margin:30px 0;
}

.article-ul li{
    font-size:1.1rem;
margin-bottom:15px;
line-height:1;
color:var(--text);
}



/*********************
CARDS
*********************/
.tips-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:40px;
}

.tip-card{
background:linear-gradient(to bottom,var(--white),var(--cream));
padding:30px;
border-radius:18px;
border-top:5px solid var(--gold);
transition:.35s;
}

.tip-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(15,28,63,.12);
}

/*********************
QUOTE
********************
blockquote{
margin:70px 0;
padding:40px;
background:var(--navy);
color:white;
font-size:1.4rem;
line-height:1.8;
font-style:italic;
border-left:8px solid var(--gold);
border-radius:18px;
}
*/


blockquote{
    position:relative;
    margin:70px 0;
    padding:55px 60px;
       background:
        radial-gradient(circle at top right,
        rgba(230,200,150,.55),
        transparent 40%),
        linear-gradient(135deg,#FFFDF7,#F8EFD9);
    border:2px solid rgba(200,164,107,.35);
    border-radius:24px;
    color:var(--navy);
    font-size:1.55rem;
    line-height:1.8;
    font-style:italic;
    text-align:center;
    box-shadow:
        0 12px 30px rgba(200,164,107,.20),
        0 20px 50px rgba(15,28,63,.06);
    overflow:hidden;
}

blockquote::before{
    content:"“";
    position:absolute;
    left:35px;
    top:12px;
    font-size:6rem;
    color:rgba(200,164,107,.35);
    font-family:Georgia,serif;
    line-height:1;
}

blockquote::after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(230,200,150,.45) 0%,
        rgba(230,200,150,0) 70%);
}

/*********************
RESPONSIVE
*********************/
@media(max-width:768px){
.seo-article{
padding:35px;
}

.article-header h1{
font-size:2.2rem;
}

.lead{
font-size:1.1rem;
}

h2{
font-size:1.6rem;
}

} /* <-- закрыли media */



/*********************
ССЫЛКА НА СТАТЬЮ
*********************/
.article-link{
    display:block;
    text-decoration:none;
    color:inherit;
    padding:20px;
    border-radius:12px;
    transition:.3s;
}

.article-link:hover{
    background:#F6F1E8;
    transform:translateY(-2px);
}

.article-link h3{
    color:var(--navy);
    margin-bottom:8px;
}

.article-link p{
    color:var(--text-light);
    margin:0;
}

.article-link:hover h3{
    color:var(--gold);
}