*{box-sizing:border-box}
:root{--bg:#f6f1e8;--surface:#fff;--soft:#fbf8f2;--text:#1f2933;--muted:#566170;--line:#ded6c9;--accent:#8a5a2b;--accent-dark:#5f3d1d;--shadow:0 16px 38px rgba(31,41,51,.07);--radius:1.1rem;--max:1080px}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;font-size:16px}
a{color:var(--accent-dark);text-decoration-thickness:.08em;text-underline-offset:.18em}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line);background:rgba(246,241,232,.95);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.header-top{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.logo{font-weight:850;font-size:1rem;text-decoration:none;color:var(--text)}
.version-badge{font-size:.72rem;font-weight:800;color:var(--accent-dark);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.18rem .5rem;white-space:nowrap}
.main-nav{display:flex;gap:.95rem;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:var(--muted);font-weight:750;font-size:.9rem}
.hero,.section,.article{width:min(var(--max),calc(100% - 2rem));margin:0 auto}
.hero{padding:clamp(2rem,6vw,5rem) 0 2.5rem;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);gap:clamp(1.25rem,4vw,3rem);align-items:center}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:850;margin:0 0 .6rem}
h1,h2,h3{line-height:1.12;letter-spacing:-.035em}
h1{font-size:clamp(2.2rem,4.8vw,4.3rem);max-width:850px;margin:0 0 1rem}
h2{font-size:clamp(1.45rem,2.6vw,2.2rem);margin:0 0 .9rem}
h3{font-size:1.15rem;margin:0 0 .55rem}
.lead{font-size:clamp(1rem,1.45vw,1.18rem);color:var(--muted);max-width:700px;margin:0 0 1.15rem}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.button{display:inline-block;background:var(--accent);color:#fff;padding:.78rem 1rem;border-radius:999px;text-decoration:none;font-weight:850;border:1px solid var(--accent)}
.button.secondary{background:transparent;color:var(--accent-dark)}
.hero-note,.card,.about,.article,.info-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-note{padding:1.3rem}
.hero-note h2{font-size:1.35rem}
.section{padding:1.7rem 0}
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1rem}
.card,.about{padding:1.25rem}
.steps{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.75rem}
.steps li{display:grid;grid-template-columns:54px 1fr;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.95rem}
.steps span{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--soft);color:var(--accent-dark);font-weight:900;font-size:.85rem}
.steps p,.card p,.hero-note p{margin-bottom:0}
.about{margin-bottom:2.5rem}
.article{max-width:860px;padding:clamp(1.1rem,3vw,2.4rem);margin-top:clamp(1.5rem,4vw,3rem);margin-bottom:2.5rem}
.article h1{font-size:clamp(2rem,4.5vw,3.8rem)}
.article section{margin-top:1.7rem}
.article p,.article li{font-size:1.04rem}
.info-box{padding:1.15rem;background:var(--soft)}
.placeholder-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.placeholder-gallery div{min-height:120px;border:1px dashed var(--accent);border-radius:.95rem;display:grid;place-items:center;text-align:center;color:var(--muted);background:var(--soft);font-weight:800;padding:1rem}
.placeholder-gallery small{font-weight:600;color:var(--muted)}
.article-steps{padding-left:1.3rem}
.article-steps li{margin:.3rem 0}
.site-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.8rem clamp(1rem,4vw,2.5rem);border-top:1px solid var(--line);color:var(--muted)}
.site-footer p{margin:0}
@media(max-width:860px){.hero,.content-grid,.placeholder-gallery{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}.steps li{grid-template-columns:1fr}}
@media(max-width:520px){
body{font-size:15px;line-height:1.5}
.site-header{padding:1rem 1rem .9rem}.logo{font-size:1.15rem}.version-badge{font-size:.65rem}.main-nav{gap:.85rem}.main-nav a{font-size:1rem}
.hero{width:min(100% - 1.25rem,var(--max));padding:1.65rem 0 1.7rem;gap:1rem}
.eyebrow{font-size:.68rem;letter-spacing:.12em}
h1{font-size:clamp(2.05rem,10vw,2.85rem);line-height:1.08}
.lead{font-size:1.02rem;line-height:1.55}
.button{width:100%;text-align:center;padding:.85rem 1rem}
.hero-note{display:none}
.section{width:min(100% - 1.25rem,var(--max));padding:1.35rem 0}
.card,.about{padding:1rem}
.article{width:min(100% - 1.25rem,860px);padding:1.1rem;margin-top:1.25rem;margin-bottom:2rem}
.article h1{font-size:clamp(2rem,9vw,2.55rem)}
.article h2{font-size:1.55rem}
.article p,.article li{font-size:1rem;line-height:1.58}
.info-box{padding:1rem}
.placeholder-gallery{grid-template-columns:1fr}
.placeholder-gallery div{min-height:95px}
.site-footer{padding:1.5rem 1rem}
}