:root {
  --bg: #ece6dc;
  --surface: #f8f3eb;
  --text: #1f2c3d;
  --muted: #6c7380;
  --gold: #c4a669;
  --line: #e2d8ca;
  --shadow: 0 12px 28px rgba(16,24,35,0.05);
  --radius: 28px;
  --max: 1180px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Georgia,"Times New Roman",serif;
line-height:1.7;
}

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

a{
text-decoration:none;
color:inherit;
}

.container{
width:min(var(--max),calc(100% - 32px));
margin:0 auto;
}

.site-header{
position:sticky;
top:0;
z-index:10;
background:rgba(236,230,220,0.95);
border-bottom:1px solid var(--line);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:90px;
}

.brand{
display:flex;
align-items:center;
gap:16px;
}

.brand-logo{
width:58px;
height:58px;
object-fit:contain;
}

.brand-name{
font-size:1.2rem;
letter-spacing:0.02em;
}

.header-nav{
display:flex;
gap:24px;
color:var(--muted);
}

.nav-link:hover{
color:var(--text);
}

.hero{
padding:70px 0 40px;
}

.hero-inner{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:40px;
align-items:center;
}

.hero-copy{
background:var(--surface);
border:1px solid var(--line);
border-radius:32px;
padding:50px;
box-shadow:var(--shadow);
}

.hero-kicker{
display:inline-block;
padding:10px 18px;
border:1px solid var(--line);
border-radius:999px;
margin-bottom:22px;
color:var(--muted);
}

h1{
font-size:clamp(2.4rem,5vw,4.5rem);
margin-bottom:20px;
}

h2{
font-size:2rem;
margin-bottom:16px;
}

.hero-text{
color:var(--muted);
font-size:1.15rem;
}

.hero-actions{
display:flex;
gap:14px;
margin-top:26px;
}

.button-primary{
background:white;
border:1px solid var(--gold);
padding:14px 22px;
border-radius:999px;
}

.button-secondary{
border:1px solid var(--line);
padding:14px 22px;
border-radius:999px;
}

.hero-mark-frame{
background:var(--surface);
border:1px solid var(--line);
border-radius:32px;
padding:40px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-logo{
width:320px;
}

.section{
padding:50px 0;
}

.quiet-box{
background:white;
border:1px solid var(--line);
border-radius:var(--radius);
padding:30px;
box-shadow:var(--shadow);
}

.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.step-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
padding:28px;
box-shadow:var(--shadow);
}

.step-number{
width:42px;
height:42px;
border-radius:50%;
border:1px solid var(--gold);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
color:var(--gold);
}

.site-footer{
padding:40px 0;
border-top:1px solid var(--line);
color:var(--muted);
}

/* MOBILE */

@media (max-width:900px){

.hero-inner{
grid-template-columns:1fr;
}

.steps{
grid-template-columns:1fr;
}

}

/* SMARTPHONE */

@media (max-width:600px){

.header-nav{
display:none;
}

.brand-logo{
width:44px;
height:44px;
}

.brand-name{
font-size:1rem;
}

.hero-copy{
padding:28px;
}

.hero-logo{
width:240px;
}

h1{
font-size:2rem;
}

}