.site-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; height: var(--header-height); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary-dark); font-weight: 700; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand__name { font-size: 18px; }
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--color-border); }
.site-nav__inner { display: flex; align-items: center; min-height: var(--nav-height); gap: var(--space-4); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-primary-dark); }
.nav-menu { position: absolute; top: 100%; right: 16px; left: 16px; display: none; flex-direction: column; padding: var(--space-2); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.nav-menu.is-open { display: flex; }
.nav-menu__link { padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text-muted); }
.nav-menu__link:hover, .nav-menu__link.is-active { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.site-nav__cta { margin-left: auto; }
.site-footer { margin-top: var(--space-10); padding: var(--space-10) 0 0; background: #103747; color: #d9e8ed; }
.site-footer__grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); }
.site-footer .brand { color: var(--color-white); }
.site-footer .brand img { width: 32px; height: 32px; }
.site-footer p { margin-top: var(--space-3); color: #b7ced6; font-size: 14px; }
.site-footer__title { margin-bottom: var(--space-4); color: var(--color-white); font-size: 16px; }
.site-footer__grid > div:not(:first-child) { display: grid; align-content: start; gap: 10px; }
.site-footer a:not(.brand) { color: #d9e8ed; font-size: 14px; }
.site-footer a:not(.brand):hover { color: var(--color-white); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: var(--space-5) 0 calc(var(--space-5) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(217, 232, 237, .2); color: #b7ced6; font-size: 13px; }
.hero { padding: var(--space-10) 0; background: var(--color-white); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__content h1 { margin-bottom: var(--space-4); font-size: clamp(32px, 7vw, 54px); }
.hero__content > p:not(.eyebrow) { color: var(--color-text-muted); font-size: clamp(16px, 2vw, 20px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media { overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-soft); aspect-ratio: 5 / 3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-heading--visual { overflow: hidden; }
.page-heading__grid { display: grid; gap: var(--space-6); align-items: center; }
.page-heading__grid img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.grid { display: grid; gap: var(--space-4); }
.grid--services { grid-template-columns: 1fr; }
.grid--cases, .grid--articles { grid-template-columns: 1fr; }
.grid--advantages { grid-template-columns: 1fr 1fr; }
.detail-layout { display: grid; gap: var(--space-8); }
.content-detail { min-width: 0; }
.content-detail > section { margin-top: var(--space-8); }
.detail-sidebar { align-self: start; }
.sidebar-box { padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sidebar-box h2 { margin-bottom: var(--space-3); font-size: 22px; }
.sidebar-box p { margin-bottom: var(--space-5); color: var(--color-text-muted); }
.sidebar-link { display: block; padding: 10px 0; color: var(--color-primary); }
.side-index { display: flex; gap: 8px; overflow-x: auto; align-self: start; }
.side-index a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text-muted); }
.process { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: process; }
.process li { position: relative; display: grid; gap: 4px; padding: var(--space-5); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.process li::before { counter-increment: process; content: counter(process, decimal-leading-zero); color: var(--color-primary); font-weight: 700; }
.process span { color: var(--color-text-muted); font-size: 14px; }
.process--vertical li { grid-template-columns: 48px 1fr; }
.filter-bar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: var(--space-6); padding-bottom: 4px; }
.contact-layout, .contact-cta__inner, .faq-preview { display: grid; gap: var(--space-8); }
.contact-cta { background: var(--color-primary-soft); }
.contact-cta__inner { align-items: center; }
.contact-cta__inner h2 { font-size: clamp(24px, 4vw, 34px); }
.contact-info { padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.contact-info h2 { margin-bottom: var(--space-5); }
.contact-info p { margin-top: var(--space-3); color: var(--color-text-muted); }
.legal-content { max-width: 820px; }
.error-page { text-align: center; }
.error-page h1 { margin-bottom: var(--space-3); font-size: clamp(34px, 8vw, 64px); }
.error-page p { margin-bottom: var(--space-6); color: var(--color-text-muted); }
.prev-next { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-primary); }
@media (min-width: 768px) { .hero { padding: var(--space-14) 0; } .hero__grid { grid-template-columns: 1fr 1fr; } .page-heading__grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); } .grid--services { grid-template-columns: repeat(2, 1fr); } .grid--cases, .grid--articles { grid-template-columns: repeat(2, 1fr); } .grid--advantages { grid-template-columns: repeat(4, 1fr); } .process { grid-template-columns: repeat(4, 1fr); } .detail-layout { grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr); } .contact-layout { grid-template-columns: 1fr 1.2fr; } .contact-cta__inner { grid-template-columns: 1fr auto; } .faq-preview { grid-template-columns: 1fr 1.5fr; } .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
@media (min-width: 992px) { .nav-toggle { display: none; } .nav-menu { position: static; display: flex; flex: 1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; box-shadow: none; } .nav-menu__link { padding: 8px 12px; } .grid--services { grid-template-columns: repeat(3, 1fr); } .grid--cases, .grid--articles { grid-template-columns: repeat(3, 1fr); } .side-index { display: grid; overflow: visible; } }