html{
scroll-behavior:smooth;
}

:root{
--green:#73ab53;
--green-dark:#50753c;
--cream:#f5f6f1;
--panel:#ffffff;
--text:#2f332d;
--line:#dfe8d8;
--shadow:0 14px 35px rgba(0,0,0,0.08);
--radius:20px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Georgia, serif;
color:var(--text);
background:linear-gradient(to bottom,#eef3e8 0%,#f5f6f1 100%);
line-height:1.7;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
color:var(--green-dark);
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
padding-left:24px;
padding-right:24px;
}

/* HERO HEADER */

.hero-header{
background:var(--green);
padding:12px 0 10px;
position:relative;
text-align:center;
overflow:hidden;
}

.hero-top-icons{
position:absolute;
top:30px;
right:28px;
display:flex;
gap:18px;
z-index:2;
}

.header-icon{
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
}

.header-icon svg{
width:46px;
height:46px;
transition:.25s;
}

.header-icon:hover svg{
transform:scale(1.08);
opacity:.9;
}

.hero-logo-wrap{
display:flex;
justify-content:center;
margin-bottom:10px;
}

.hero-logo{
height:150px;
width:auto;
}

.hero-title{
margin:0 auto;
color:white;
font-size:clamp(2rem,4.6vw,4.9rem);
line-height:.98;
letter-spacing:.01em;
text-transform:uppercase;
white-space:nowrap;
max-width:100%;
padding:0 90px;
}

.hero-divider{
height:4px;
background:white;
margin:12px auto 14px;
width:100%;
max-width:1600px;
}

.hero-nav{
display:flex;
justify-content:center;
gap:110px;
padding-bottom:4px;
flex-wrap:wrap;
}

.hero-nav a{
color:white;
text-transform:uppercase;
font-weight:700;
font-size:clamp(1.2rem,2.6vw,2.6rem);
line-height:1;
}

.hero-nav a:hover{
text-decoration:none;
opacity:.88;
}

.intro-section{
padding:36px 0 12px;
}

.intro-text{
max-width:860px;
margin:0 auto;
text-align:center;
font-size:1.2rem;
line-height:1.65;
}

/* SECTIONS */

.content-section{
padding:30px 0 45px;
scroll-margin-top:40px;
}

.section-heading{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:18px;
margin-bottom:26px;
}

.section-heading span{
height:1px;
background:#a9b99f;
}

h2{
margin:0;
color:var(--green-dark);
text-transform:uppercase;
letter-spacing:.08em;
font-size:clamp(1.7rem,3vw,2.2rem);
}

h3{
color:var(--green-dark);
margin-top:0;
font-size:1.3rem;
}

.panel{
background:var(--panel);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:30px;
}

.text-panel{
font-size:1.04rem;
}

/* BOOKS */

.books-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

.book-card{
background:var(--panel);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:20px;
text-align:center;
transition:.3s;
}

.book-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 38px rgba(0,0,0,0.12);
}

.book-image{
border-radius:12px;
margin-bottom:16px;
}

.button{
display:inline-block;
margin-top:12px;
padding:12px 20px;
border-radius:999px;
background:var(--green);
color:white;
font-weight:700;
transition:.25s;
}

.button:hover{
transform:translateY(-2px);
text-decoration:none;
}

.button.muted{
background:#9aa295;
cursor:default;
}

/* CONTACT */

.contact-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:26px;
}

.contact-form{
display:grid;
gap:14px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

label{
font-weight:700;
margin-bottom:6px;
display:block;
}

input,
textarea{
width:100%;
padding:12px;
border-radius:10px;
border:1px solid #c9d0c5;
font:inherit;
}

input:focus,
textarea:focus{
outline:2px solid #c7dcc0;
}

.submit-button{
border:none;
background:#666;
color:white;
padding:12px 26px;
border-radius:6px;
cursor:pointer;
font-weight:700;
}

.submit-button:hover{
background:#555;
}

.contact-icons{
display:flex;
gap:18px;
margin-top:12px;
}

.icon-link{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:#eef4e8;
transition:.25s;
}

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

/* FOOTER */

.site-footer{
background:var(--green);
color:white;
margin-top:35px;
padding:25px 0 32px;
}

.footer-inner{
text-align:center;
}

.footer-logo{
height:70px;
margin:auto auto 12px;
}

.footer-links{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
margin-bottom:8px;
}

.footer-links a{
color:white;
font-weight:600;
}

.site-footer p{
margin:0;
}

/* FADE */

.fade-section{
opacity:0;
transform:translateY(28px);
transition:opacity .8s ease, transform .8s ease;
}

.fade-section.visible{
opacity:1;
transform:translateY(0);
}

/* MOBILE */

@media (max-width:1100px){
.hero-title{
font-size:clamp(1.9rem,4.2vw,4rem);
padding:0 28px;
}
}

@media (max-width:900px){

.hero-top-icons{
position:static;
justify-content:center;
margin-bottom:14px;
}

.hero-logo{
height:120px;
}

.hero-title{
white-space:normal;
font-size:2.5rem;
padding:0 16px;
}

.hero-nav{
gap:36px;
flex-wrap:wrap;
}

.books-grid,
.contact-grid{
grid-template-columns:1fr;
}

}

@media (max-width:640px){

.container{
padding-left:18px;
padding-right:18px;
}

.hero-logo{
height:95px;
}

.hero-title{
font-size:2rem;
}

.hero-nav a{
font-size:1.2rem;
}

.form-row{
grid-template-columns:1fr;
}

.panel{
padding:22px;
}

}