@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
--primary:#181d26;
--primary-active:#0d1218;
--canvas:#ffffff;
--surface-soft:#f8fafc;
--surface-strong:#e0e2e6;
--surface-dark:#181d26;
--hairline:#dddddd;
--ink:#181d26;
--body:#333840;
--muted:#41454d;
--on-primary:#ffffff;
--link:#1b61c9;
--link-active:#1a3866;
--sig-coral:#aa2d00;
--sig-forest:#0a2e0e;
--sig-cream:#f5e9d4;
--sig-peach:#fcab79;
--sig-mint:#a8d8c4;
--section:96px;
--radius-lg:12px;
--radius-md:10px;
--radius-sm:6px;
--maxw:1280px;
}
* { box-sizing:border-box; }
html { font-size:16px; }
body {
margin:0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size:14px;
font-weight:400;
line-height:1.25;
color:var(--body);
background:var(--canvas);
}
.skip-link {
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.skip-link:focus {
left:16px;
top:16px;
width:auto;
height:auto;
padding:8px 12px;
background:var(--canvas);
border:1px solid var(--hairline);
z-index:100;
}
.top-nav {
height:64px;
background:var(--canvas);
border-bottom:1px solid var(--hairline);
position:sticky;
top:0;
z-index:50;
}
.nav-inner {
max-width:var(--maxw);
margin:0 auto;
padding:0 48px;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.wordmark {
font-size:18px;
font-weight:500;
color:var(--ink);
text-decoration:none;
}
.primary-nav {
display:flex;
flex-wrap:wrap;
gap:16px 20px;
align-items:center;
}
.primary-nav a {
font-size:14px;
color:var(--body);
text-decoration:none;
}
.primary-nav a:hover { text-decoration:underline; color:var(--link); }
.nav-toggle {
display:none;
font-size:14px;
font-weight:500;
padding:8px 16px;
border-radius:var(--radius-lg);
border:1px solid var(--hairline);
background:var(--canvas);
color:var(--ink);
cursor:pointer;
}
.hero-band {
max-width:var(--maxw);
margin:0 auto;
padding:var(--section) 48px;
}
.display-lg {
font-size:40px;
font-weight:400;
line-height:1.2;
color:var(--ink);
margin:0 0 16px;
}
.lead {
font-size:18px;
line-height:1.45;
color:var(--body);
max-width:42rem;
margin:0 0 32px;
}
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
.btn-primary {
display:inline-block;
padding:16px 24px;
font-size:16px;
font-weight:500;
color:var(--on-primary);
background:var(--primary);
border-radius:var(--radius-lg);
text-decoration:none;
border:none;
cursor:pointer;
}
.btn-primary:active { background:var(--primary-active); }
.btn-secondary {
display:inline-block;
padding:16px 24px;
font-size:16px;
font-weight:500;
color:var(--ink);
background:var(--canvas);
border-radius:var(--radius-lg);
text-decoration:none;
border:1px solid var(--hairline);
}
.section {
padding:var(--section) 48px;
}
.section-inner {
max-width:var(--maxw);
margin:0 auto;
}
.title-lg {
font-size:24px;
font-weight:400;
line-height:1.35;
letter-spacing:0.12px;
color:var(--ink);
margin:0 0 24px;
}
.card-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
}
@media (max-width:1024px) {
.card-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:767px) {
.nav-toggle { display:inline-block; }
.primary-nav {
display:none;
position:absolute;
left:0;
right:0;
top:64px;
background:var(--canvas);
border-bottom:1px solid var(--hairline);
padding:16px 48px 24px;
flex-direction:column;
align-items:flex-start;
}
.primary-nav.is-open { display:flex; }
.card-grid { grid-template-columns:1fr; }
.hero-band, .section { padding-left:24px; padding-right:24px; }
.nav-inner { padding:0 24px; }
}
.article-card {
background:var(--canvas);
border:1px solid var(--hairline);
border-radius:var(--radius-md);
padding:16px;
display:flex;
flex-direction:column;
}
.article-card img {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
border-radius:var(--radius-md);
}
.article-card h3 {
font-size:18px;
font-weight:500;
margin:12px 0 8px;
line-height:1.4;
}
.article-card p {
margin:0 0 12px;
flex:1;
}
.article-card a {
font-size:14px;
font-weight:500;
color:var(--link);
text-decoration:none;
}
.article-card a:hover { color:var(--link-active); text-decoration:underline; }
.signature-coral {
background:var(--sig-coral);
color:var(--on-primary);
padding:48px;
border-radius:var(--radius-lg);
margin:0 auto;
max-width:var(--maxw);
}
.signature-coral .title-lg { color:var(--on-primary); }
.signature-coral p { color:var(--on-primary); opacity:0.95; max-width:40rem; }
.signature-forest {
background:var(--sig-forest);
color:var(--on-primary);
padding:48px;
border-radius:var(--radius-lg);
margin:32px auto 0;
max-width:var(--maxw);
}
.signature-forest p { margin:0; max-width:42rem; opacity:0.95; }
.cream-band {
background:var(--sig-cream);
padding:var(--section) 48px;
}
.demo-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
}
.demo-card {
padding:16px;
border-radius:var(--radius-md);
background:var(--canvas);
min-height:120px;
}
.demo-card:nth-child(1) { background:var(--sig-peach); }
.demo-card:nth-child(2) { background:var(--sig-mint); }
.demo-card:nth-child(3) { background:var(--surface-soft); }
@media (max-width:767px) {
.demo-grid { grid-template-columns:1fr; }
}
.surface-strong-band {
background:var(--surface-strong);
padding:48px;
border-radius:var(--radius-lg);
max-width:var(--maxw);
margin:0 auto;
}
.hero-dark {
background:var(--surface-dark);
color:var(--on-primary);
padding:48px;
border-radius:var(--radius-lg);
max-width:var(--maxw);
margin:0 auto;
}
.hero-dark .title-lg { color:var(--on-primary); }
.hero-dark p { color:var(--on-primary); opacity:0.95; }
.site-footer {
border-top:1px solid var(--hairline);
padding:var(--section) 48px 48px;
background:var(--canvas);
}
.footer-inner { max-width:var(--maxw); margin:0 auto; }
.footer-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:32px;
}
@media (max-width:767px) {
.footer-grid { grid-template-columns:1fr; }
}
.footer-heading {
font-size:14px;
font-weight:500;
margin:0 0 12px;
color:var(--ink);
}
.footer-links {
list-style:none;
padding:0;
margin:0;
}
.footer-links li { margin-bottom:8px; }
.footer-links a {
font-size:14px;
color:var(--muted);
text-decoration:none;
}
.footer-links a:hover { color:var(--link); }
.footer-meta {
font-size:13px;
color:var(--muted);
margin-top:32px;
max-width:52rem;
}
main#main { outline:none; }
.prose { max-width:46rem; }
.prose h1 {
font-size:32px;
font-weight:400;
line-height:1.2;
color:var(--ink);
margin:0 0 16px;
}
.prose h2 {
font-size:24px;
font-weight:400;
margin:32px 0 12px;
color:var(--ink);
}
.prose h3 {
font-size:20px;
font-weight:400;
margin:24px 0 8px;
color:var(--ink);
}
.prose p { margin:0 0 16px; }
.prose ul { margin:0 0 16px; padding-left:1.25rem; }
.prose a { color:var(--link); text-decoration:none; }
.prose a:hover { text-decoration:underline; color:var(--link-active); }
.prose .meta { font-size:14px; color:var(--muted); margin-bottom:24px; }
.figure { margin:24px 0; }
.figure img {
max-width:100%;
border-radius:var(--radius-md);
display:block;
}
.caption {
font-size:13px;
color:var(--muted);
margin-top:8px;
}
.layout-split {
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
align-items:start;
}
@media (max-width:767px) {
.layout-split { grid-template-columns:1fr; }
}
.form-panel {
background:var(--surface-soft);
padding:32px;
border-radius:var(--radius-lg);
border:1px solid var(--hairline);
}
.form-panel label {
display:block;
font-size:14px;
font-weight:500;
margin-bottom:6px;
color:var(--ink);
}
.form-panel input {
width:100%;
padding:12px 16px;
height:44px;
font-size:14px;
border:1px solid var(--hairline);
border-radius:var(--radius-sm);
margin-bottom:16px;
}
.form-panel input:focus {
outline:2px solid #458fff;
border-color:#458fff;
}
.form-status {
font-size:14px;
color:var(--muted);
margin-top:8px;
}
.cookie-banner {
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--canvas);
border-top:1px solid var(--hairline);
padding:16px 24px;
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
justify-content:space-between;
z-index:60;
box-shadow:0 -4px 12px rgba(0,0,0,0.06);
}
.cookie-banner p {
margin:0;
font-size:14px;
max-width:52rem;
}
.cookie-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-legal {
font-size:13.12px;
font-weight:600;
padding:12px 10px;
border-radius:2px;
border:none;
cursor:pointer;
background:var(--link);
color:var(--on-primary);
}
.btn-legal.outline {
background:var(--canvas);
color:var(--ink);
border:1px solid var(--hairline);
}
.hidden { display:none !important; }