:root { --blue: #5993ee; --ink: #1d2327; --wide: 1344px; --content: 672px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }
.reference-shell { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 1000; height: 60px; background: #fff; box-shadow: 0 4px 15px -3px rgba(59, 130, 246, .3); }
.header-inner { width: min(var(--wide), calc(100% - 48px)); height: 100%; display: flex; align-items: center; justify-content: space-between; }
.reference-logo, .footer-logo { display: inline-flex; align-items: center; }
.reference-logo img { width: 115px; height: auto; }
.header-actions { display: flex; gap: 10px; }
.auth-button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0; border: 0; border-radius: 11px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.6; text-decoration: none; cursor: pointer; }
.auth-login { width: 90px; color: #5a8bbd; background: #c8dff0; }.auth-register { width: 109px; background: #9bc6ee; }
.intro { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; padding: 54px 0 0; text-align: center; }
.intro-copy { margin: 0 0 24px; }.intro h1 { margin: 0 0 24px; color: var(--blue); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 24px; line-height: 1.2; font-weight: 600; }.intro-copy p { margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; }
.posts-grid { width: min(1010px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; padding: 0 0 45px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.post-card { min-height: 352px; overflow: hidden; border: 1px solid #eaf0f5; border-radius: 12px; background: #fff; box-shadow: 0 2px 9px rgba(31, 59, 87, .10); transition: transform .2s, box-shadow .2s; }.post-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31, 59, 87, .14); }
.post-image { display: block; height: 154px; margin: 14px 14px 0; overflow: hidden; border-radius: 5px; background: #f4f6fa; }.post-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.post-copy { padding: 13px 15px 16px; }.post-copy h2 { margin: 0; color: #5d9ee2; font-size: 13px; line-height: 1.4; font-weight: 600; }.post-copy h2 a:hover { color: #3a6b9d; }.post-copy p { display: -webkit-box; overflow: hidden; margin: 14px 0 0; color: #3d4c5d; font-size: 14px; line-height: 1.58; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.service-row { display: grid; grid-template-columns: 36% 1fr; align-items: center; padding: 24px 0; }.service-image img { display: block; width: 100%; }.service-copy { padding: 0 24px; }.service-copy h2 { margin: 0 0 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; font-weight: 600; }.service-copy p { margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; }
.site-footer { border-top: 1px solid #e8e8e8; }.footer-inner { width: min(var(--wide), calc(100% - 48px)); display: flex; align-items: center; min-height: 74px; color: #b9b9b9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; }.footer-inner > div { display: flex; align-items: center; gap: 100px; }.footer-logo img { width: 96px; opacity: .65; }.footer-inner nav { display: flex; gap: 16px; margin-left: auto; color: #358ed6; font-size: 14px; text-decoration: underline; }.footer-inner nav a:hover { text-decoration: underline; }
.article-page { max-width: var(--content); padding: 10px 0 75px; }.article-page h1 { margin: 0 0 26px; color: #1d2327; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: clamp(24px, 4vw, 36px); line-height: 1.2; font-weight: 600; }.article-cover { display: block; width: 100%; max-height: 405px; margin: 0 0 25px; border-radius: 24px; object-fit: cover; }.reference-article-content { color: #1d2327; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }.reference-article-content p { margin: 0 0 24px; }.reference-article-content ul, .reference-article-content ol { margin: 0 0 24px; padding-left: 1em; }.reference-article-content li { margin: 0; }.reference-article-content a { color: #2d59f2; text-decoration: underline; }
.mobile-auth-actions { display: none; }
@media (max-width: 768px) {
  .header-inner, .footer-inner { width: calc(100% - 48px); }
  .header-actions { display: none; }
  .mobile-fixed-buttons {
    position: fixed;
    right: 15px;
    bottom: 15px;
    left: 15px;
    z-index: 999999;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, .08), 0 2px 10px rgba(0, 0, 0, .05);
  }
  .mobile-auth-actions .auth-button { min-width: 0; }
  .intro { padding-top: 36px; }
  .posts-grid { gap: 18px; }
  .post-card { padding: 12px; min-height: 210px; }
  .post-image { height: 110px; }
  .post-copy h2 { font-size: 13.6px; }
  .service-row { padding-block: 24px; }
  .article-page { padding-top: 24px; }
}
@media (max-width: 600px) { .service-row { grid-template-columns: 1fr; }.service-copy { padding: 24px 0 0; } }
@media (max-width: 550px) { .reference-shell, .intro { width: calc(100% - 48px); }.posts-grid { grid-template-columns: 1fr; gap: 20px; }.post-card { min-height: 0; padding: 15px; }.post-image { height: 160px; }.footer-inner { align-items: flex-start; flex-wrap: wrap; gap: 16px; padding-block: 20px; }.footer-inner > div { gap: 12px; }.footer-inner nav { margin-left: 0; } }