: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;
font-weight:700;
letter-spacing:-0.3px;
color:var(--navy);
position:relative;
padding-left:20px;
}

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,#FFFFFF,var(--beg));
padding:30px;
border-radius:18px;
border-top:5px solid var(--gold);
transition:.35s;
border:1px solid rgba(21,59,106,.06);
}

.tip-card:hover{
transform:translateY(-8px);
box-shadow:
0 15px 35px rgba(21,59,106,.12);
border-top-color:var(--green);
}

/*********************
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(46,93,147,.15),
transparent 45%),
linear-gradient(135deg,#FFFFFF,#EDF4FB);

border:1px solid rgba(21,59,106,.12);
border-radius:24px;

color:var(--navy);

font-size:1.55rem;
line-height:1.8;
font-style:italic;
text-align:center;

box-shadow:
0 10px 30px rgba(21,59,106,.08);
overflow:hidden;
}

blockquote::before{
content:"“";
position:absolute;
left:35px;
top:10px;

font-size:6rem;
color:rgba(21,59,106,.12);
font-family:Georgia,serif;
}

blockquote::after{
content:"";
position:absolute;
right:-120px;
bottom:-120px;
width:320px;
height:320px;
border-radius:50%;
background:radial-gradient(circle,
rgba(46,93,147,.10),
transparent 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:var(--beg);
    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);
}