@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Playfair+Display:wght@700&display=swap');

:root{
--paper:#f5efe5;
--sage:#7d927b;
--dark:#455344;
}
*{box-sizing:border-box}
body{
margin:0;
background:#eee7dc;
font-family:'Baloo 2',sans-serif;
color:var(--dark);
}
.topbar{
position:sticky;top:0;z-index:5;
display:flex;justify-content:space-between;
padding:22px 40px;
background:#f7f0e5cc;
backdrop-filter:blur(10px);
border-bottom:2px solid #ddd2c0;
font-size:1.3rem;
}
.badge,.button,.buy{
background:var(--sage);
color:white;
padding:12px 24px;
border-radius:18px;
text-decoration:none;
box-shadow:5px 5px 0 #d7cbb8;
}
nav{display:flex;gap:18px}
.hero{text-align:center;padding:60px 20px}
.hero-img{width:min(600px,90%);border-radius:30px}
.logo-text{width:min(700px,90%);display:block;margin:25px auto}
.tagline{font-size:1.5rem}
.ca-box{
margin:30px auto;
display:flex;justify-content:center;gap:10px;
font-size:1.2rem;
}
.ca-box button{
padding:12px;border-radius:14px;border:0;background:var(--sage);color:white
}
.paper-section,.join{
margin:50px auto;
width:min(1100px,92%);
padding:45px;
background:#f8f1e7;
border-radius:35px;
box-shadow:0 20px 50px #b9ae9b55;
}
h2{
font-family:'Playfair Display',serif;
font-size:3rem;
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.split img,.wide-art{width:100%;border-radius:25px}
.cards{display:grid;gap:15px}
.cards p{
padding:20px;
background:#ebe3d5;
border-radius:20px;
}
.chart iframe{
width:100%;
height:500px;
background:white;
border-radius:25px;
}
.join{
background-image:linear-gradient(#0005,#0005),url('assets/bg.png');
background-size:cover;
color:white;
text-align:center;
}
.button{display:inline-block;margin:15px}
footer{text-align:center;padding:40px}
@media(max-width:700px){
.split{grid-template-columns:1fr}
h2{font-size:2rem}
.topbar{padding:15px;font-size:1rem}
}


.hero-card{
    width:min(760px,94%);
    margin:0 auto;
    padding:25px;
    background:#f8f1e7;
    border:3px solid #ddd2c0;
    border-radius:45px;
    box-shadow:12px 15px 0 #d9cfbd;
}
.hero-img{
    display:block;
    width:100%;
    border-radius:28px;
    object-fit:cover;
}
.nav-btn{
    background:#f8f1e7;
    color:#455344;
    border:2px solid #b9aa91;
    padding:12px 25px;
    border-radius:18px;
    text-decoration:none;
    transition:.2s;
    box-shadow:4px 4px 0 #d7cbb8;
}
.nav-btn:hover,.button:hover{
    transform:translateY(-3px);
}
.buy{
    background:#7d927b;
    color:white;
    border-color:#7d927b;
}
.button{
    border:2px solid rgba(255,255,255,.5);
    transition:.2s;
}