@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--canvas:#f7f7f4;
--canvas-soft:#fafaf7;
--surface-card:#ffffff;
--surface-strong:#e6e5e0;
--primary:#f54e00;
--primary-active:#d04200;
--ink:#26251e;
--body:#5a5852;
--body-strong:#26251e;
--muted:#807d72;
--muted-soft:#a09c92;
--on-primary:#ffffff;
--hairline:#e6e5e0;
--hairline-soft:#efeee8;
--hairline-strong:#cfcdc4;
--semantic-success:#1f8a65;
--semantic-error:#cf2d56;
--rounded-xs:4px;
--rounded-sm:6px;
--rounded-md:8px;
--rounded-lg:12px;
--rounded-xl:16px;
--rounded-pill:9999px;
}

html{scroll-behavior:smooth}

body{
background:var(--canvas);
color:var(--body);
font-family:'Inter',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:16px;
font-weight:400;
line-height:1.5;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--primary)}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{color:var(--ink);font-weight:400;letter-spacing:-0.03em}
h1{font-size:clamp(32px,5vw,72px);line-height:1.1;letter-spacing:-2.16px}
h2{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-0.72px}
h3{font-size:clamp(20px,2.5vw,26px);line-height:1.25;letter-spacing:-0.325px}
h4{font-size:22px;line-height:1.3;letter-spacing:-0.11px}

p{color:var(--body);font-size:16px;line-height:1.5;margin-bottom:16px}
p:last-child{margin-bottom:0}

.text-muted{color:var(--muted);font-size:14px}
.text-ink{color:var(--ink)}
.text-sm{font-size:14px;line-height:1.5}
.text-caption{font-size:13px;line-height:1.4;color:var(--muted)}

.label-upper{
font-size:11px;
font-weight:600;
line-height:1.4;
letter-spacing:0.88px;
text-transform:uppercase;
color:var(--muted);
}

.nav-site{
background:var(--canvas);
border-bottom:1px solid var(--hairline);
height:64px;
position:sticky;
top:0;
z-index:100;
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:100%;
}

.nav-brand{
font-size:16px;
font-weight:600;
color:var(--ink);
letter-spacing:-0.02em;
}
.nav-brand span{color:var(--primary)}

.nav-links{
display:flex;
align-items:center;
gap:24px;
list-style:none;
}

.nav-links a{
font-size:14px;
font-weight:500;
color:var(--body);
transition:color .15s;
}
.nav-links a:hover{color:var(--ink)}

.nav-hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:4px;
}
.nav-hamburger span{
display:block;
width:22px;
height:2px;
background:var(--ink);
border-radius:2px;
transition:all .2s;
}

@media(max-width:768px){
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--hairline);flex-direction:column;gap:0;padding:8px 0}
.nav-links.open{display:flex}
.nav-links li{width:100%}
.nav-links a{display:block;padding:12px 24px;border-bottom:1px solid var(--hairline-soft)}
.nav-hamburger{display:flex}
}

.hero-band{
padding:80px 0;
background:var(--canvas);
}

.hero-band h1{
max-width:800px;
margin-bottom:24px;
}

.hero-band .hero-sub{
font-size:16px;
color:var(--body);
max-width:560px;
margin-bottom:40px;
}

.badge-pill{
display:inline-flex;
align-items:center;
background:var(--surface-strong);
color:var(--ink);
font-size:11px;
font-weight:600;
letter-spacing:0.88px;
text-transform:uppercase;
border-radius:var(--rounded-pill);
padding:4px 10px;
margin-bottom:20px;
}

.section{padding:80px 0}
.section-alt{background:var(--canvas-soft)}
.section-label{margin-bottom:12px}
.section-title{margin-bottom:16px}
.section-sub{max-width:560px;color:var(--body);margin-bottom:48px}

.card{
background:var(--surface-card);
border:1px solid var(--hairline);
border-radius:var(--rounded-lg);
padding:24px;
}

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

@media(max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr}}

.card-grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}
@media(max-width:768px){.card-grid-2{grid-template-columns:1fr}}

.card h3,.card h4{color:var(--ink);margin-bottom:8px}
.card p{color:var(--body);font-size:15px}

.card-img{
border-radius:var(--rounded-md);
overflow:hidden;
margin-bottom:16px;
background:var(--surface-strong);
aspect-ratio:16/9;
}
.card-img img{width:100%;height:100%;object-fit:cover}

.feature-icon{
width:40px;
height:40px;
background:var(--surface-strong);
border-radius:var(--rounded-md);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
font-size:20px;
}

.articles-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
@media(max-width:1024px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.articles-grid{grid-template-columns:1fr}}

.article-card{
background:var(--surface-card);
border:1px solid var(--hairline);
border-radius:var(--rounded-lg);
overflow:hidden;
transition:border-color .2s;
}
.article-card:hover{border-color:var(--hairline-strong)}

.article-card-img{
aspect-ratio:16/9;
overflow:hidden;
background:var(--surface-strong);
}
.article-card-img img{width:100%;height:100%;object-fit:cover}

.article-card-body{padding:20px 24px}
.article-card-body h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:0}
.article-card-body p{font-size:14px;color:var(--body);margin-bottom:12px}
.article-card-meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}

.btn{
display:inline-flex;
align-items:center;
gap:8px;
border-radius:var(--rounded-md);
font-size:14px;
font-weight:500;
line-height:1;
cursor:pointer;
border:none;
transition:background .15s,color .15s;
text-decoration:none;
}

.btn-primary{
background:var(--primary);
color:var(--on-primary);
padding:10px 18px;
height:40px;
}
.btn-primary:hover{background:var(--primary-active);color:var(--on-primary)}

.btn-secondary{
background:var(--surface-card);
color:var(--ink);
padding:10px 18px;
height:40px;
border:1px solid var(--hairline-strong);
}
.btn-secondary:hover{background:var(--surface-strong);color:var(--ink)}

.btn-download{
background:var(--ink);
color:var(--canvas);
padding:12px 20px;
height:44px;
}
.btn-download:hover{background:#3a392e;color:var(--canvas)}

.divider{
height:1px;
background:var(--hairline);
margin:0;
}

.content-article{max-width:760px;margin:0 auto}
.content-article h1{font-size:clamp(28px,4vw,48px);letter-spacing:-1.5px;margin-bottom:24px}
.content-article h2{font-size:clamp(20px,2.5vw,28px);letter-spacing:-0.5px;margin-top:48px;margin-bottom:16px}
.content-article h3{font-size:20px;margin-top:32px;margin-bottom:12px}
.content-article p{margin-bottom:20px;line-height:1.65}
.content-article ul,.content-article ol{margin-bottom:20px;padding-left:24px}
.content-article li{margin-bottom:8px;line-height:1.6}
.content-article img{border-radius:var(--rounded-lg);margin:32px 0;width:100%}
.content-article figure{margin:32px 0}
.content-article figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.content-article blockquote{
border-left:3px solid var(--hairline-strong);
padding:16px 20px;
margin:24px 0;
background:var(--canvas-soft);
border-radius:0 var(--rounded-md) var(--rounded-md) 0;
}
.content-article blockquote p{color:var(--ink);font-size:15px;margin:0}

.code-block{
background:var(--surface-card);
border:1px solid var(--hairline);
border-radius:var(--rounded-lg);
padding:20px;
font-family:'JetBrains Mono',monospace;
font-size:13px;
line-height:1.5;
color:var(--ink);
overflow-x:auto;
margin:24px 0;
}

.article-meta{
display:flex;
align-items:center;
gap:16px;
margin-bottom:32px;
padding-bottom:24px;
border-bottom:1px solid var(--hairline);
}
.article-meta-item{font-size:13px;color:var(--muted)}

.breadcrumb{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:var(--muted);
margin-bottom:24px;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb-sep{color:var(--hairline-strong)}

.info-table{
width:100%;
border-collapse:collapse;
margin:24px 0;
}
.info-table th,.info-table td{
padding:12px 16px;
border:1px solid var(--hairline);
font-size:14px;
text-align:left;
}
.info-table th{
background:var(--canvas-soft);
font-weight:600;
color:var(--ink);
}
.info-table td{color:var(--body)}
.info-table tr:nth-child(even) td{background:var(--canvas-soft)}

.contact-form{
background:var(--surface-card);
border:1px solid var(--hairline);
border-radius:var(--rounded-lg);
padding:32px;
max-width:560px;
}

.form-group{margin-bottom:20px}
.form-group label{
display:block;
font-size:14px;
font-weight:500;
color:var(--ink);
margin-bottom:6px;
}
.form-group input,.form-group textarea,.form-group select{
width:100%;
background:var(--surface-card);
color:var(--ink);
border:1px solid var(--hairline-strong);
border-radius:var(--rounded-md);
padding:12px 16px;
height:44px;
font-size:16px;
font-family:inherit;
transition:border-color .15s;
outline:none;
}
.form-group input:focus,.form-group textarea:focus{
border-color:var(--ink);
}
.form-group textarea{height:120px;resize:vertical}
.form-group input.error,.form-group textarea.error{border-color:var(--semantic-error)}

.form-msg{
padding:12px 16px;
border-radius:var(--rounded-md);
font-size:14px;
margin-top:16px;
display:none;
}
.form-msg.success{
background:#d4edda;
color:var(--semantic-success);
border:1px solid #c3e6cb;
display:block;
}
.form-msg.error{
background:#f8d7da;
color:var(--semantic-error);
border:1px solid #f5c6cb;
display:block;
}

.loading-spinner{
display:none;
align-items:center;
gap:8px;
color:var(--muted);
font-size:14px;
margin-top:12px;
}
.spinner{
width:16px;
height:16px;
border:2px solid var(--hairline);
border-top-color:var(--primary);
border-radius:50%;
animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.cookie-banner{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--ink);
color:var(--canvas);
padding:16px 24px;
z-index:999;
display:none;
}
.cookie-inner{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}
.cookie-text{font-size:14px;color:var(--canvas);flex:1;min-width:200px}
.cookie-text a{color:var(--primary);text-decoration:underline}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-accept{
background:var(--primary);
color:var(--on-primary);
border:none;
border-radius:var(--rounded-md);
padding:8px 16px;
font-size:14px;
font-weight:500;
cursor:pointer;
}
.cookie-reject{
background:transparent;
color:var(--muted-soft);
border:1px solid var(--muted);
border-radius:var(--rounded-md);
padding:8px 16px;
font-size:14px;
font-weight:500;
cursor:pointer;
}
.cookie-reject:hover{color:var(--canvas)}

.disclaimer-bar{
background:var(--canvas-soft);
border-top:1px solid var(--hairline);
padding:12px 0;
font-size:13px;
color:var(--muted);
text-align:center;
}

.footer-site{
background:var(--canvas);
border-top:1px solid var(--hairline);
padding:64px 0 48px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr 1fr;
gap:32px;
margin-bottom:48px;
}
@media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}

.footer-brand{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px}
.footer-brand span{color:var(--primary)}
.footer-brand-desc{font-size:14px;color:var(--body)}

.footer-col h4{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.88px;
color:var(--muted);
margin-bottom:12px;
}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:14px;color:var(--body)}
.footer-links a:hover{color:var(--ink)}

.footer-bottom{
border-top:1px solid var(--hairline);
padding-top:24px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:12px;
}
.footer-bottom p{font-size:13px;color:var(--muted);margin:0}

.tag{
display:inline-block;
background:var(--surface-strong);
color:var(--ink);
font-size:12px;
font-weight:500;
border-radius:var(--rounded-xs);
padding:3px 8px;
margin-right:6px;
margin-bottom:6px;
}

.page-hero{
padding:48px 0 40px;
border-bottom:1px solid var(--hairline);
margin-bottom:48px;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:start;
}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}

.highlight-box{
background:var(--canvas-soft);
border:1px solid var(--hairline);
border-radius:var(--rounded-lg);
padding:24px;
margin:24px 0;
}
.highlight-box h4{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:0}
.highlight-box p{font-size:14px;color:var(--body);margin:0}

.schema-org{display:none}

@media(max-width:768px){
.hero-band{padding:48px 0}
.section{padding:48px 0}
.contact-form{padding:24px}
.footer-site{padding:48px 0 32px}
.page-hero{padding:32px 0 24px;margin-bottom:32px}
}