.main-nav { gap: 25px; }
.community-preview { position: relative; overflow: hidden; background: linear-gradient(180deg, #f4f7fc, #eaf1fb); }
.community-preview::before { position: absolute; right: -180px; top: -180px; width: 520px; height: 520px; content: ""; border: 1px solid rgba(49, 92, 255, .12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(49, 92, 255, .025), 0 0 0 140px rgba(49, 92, 255, .02); }
.community-showcase { position: relative; width: min(1280px, 100%); min-height: 520px; margin: auto; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; color: #fff; background: #071a38; box-shadow: 0 26px 65px rgba(24, 50, 93, .18); }
.community-image { position: relative; min-height: 520px; overflow: hidden; }
.community-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 50%, #071a38 100%), linear-gradient(0deg, rgba(4, 18, 42, .68), transparent 48%); }
.community-image > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.community-image > span { position: absolute; z-index: 2; left: 28px; bottom: 30px; padding: 10px 14px; color: #dceaff; border: 1px solid rgba(110, 194, 255, .38); background: rgba(4, 24, 54, .78); backdrop-filter: blur(10px); font-size: 12px; }
.community-image > span i { width: 7px; height: 7px; margin-right: 8px; display: inline-block; border-radius: 50%; background: #42e6b0; box-shadow: 0 0 10px #42e6b0; }
.community-image > div { position: absolute; z-index: 2; right: 24px; top: 24px; width: 108px; height: 108px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255, 255, 255, .24); background: rgba(5, 27, 62, .72); backdrop-filter: blur(13px); }
.community-image b { font: 700 36px/1 Arial, sans-serif; }
.community-image small { margin-top: 7px; color: #b8cbe4; font-size: 11px; }
.community-copy { position: relative; z-index: 2; padding: 56px 50px; }
.community-copy > p { margin-bottom: 15px; color: #3bdcf7; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.community-copy > h3 { margin-bottom: 18px; font-size: 31px; line-height: 1.38; }
.community-copy > small { display: block; color: #9eb0ca; font-size: 13px; line-height: 1.9; }
.community-features { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(103, 148, 207, .22); border-left: 1px solid rgba(103, 148, 207, .22); }
.community-features article { min-height: 86px; padding: 16px; display: flex; align-items: center; gap: 13px; border-right: 1px solid rgba(103, 148, 207, .22); border-bottom: 1px solid rgba(103, 148, 207, .22); }
.community-features article > i { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(50, 213, 255, .42); border-radius: 8px; background: rgba(36, 216, 255, .08); }
.community-features article > i::before, .community-features article > i::after { position: absolute; content: ""; }
.feature-home::before { left: 8px; top: 13px; width: 16px; height: 12px; border: 1.5px solid #39d7ff; border-top: 0; }
.feature-home::after { left: 8px; top: 7px; width: 14px; height: 14px; border-left: 1.5px solid #39d7ff; border-top: 1.5px solid #39d7ff; transform: rotate(45deg); }
.feature-work::before { left: 7px; top: 10px; width: 18px; height: 14px; border: 1.5px solid #39d7ff; border-radius: 2px; }
.feature-work::after { left: 12px; top: 7px; width: 8px; height: 4px; border: 1.5px solid #39d7ff; border-bottom: 0; }
.feature-social::before { left: 7px; top: 7px; width: 8px; height: 8px; border: 1.5px solid #39d7ff; border-radius: 50%; box-shadow: 12px 5px 0 -1px #071a38, 12px 5px 0 0 #39d7ff; }
.feature-social::after { left: 5px; top: 19px; width: 22px; height: 8px; border: 1.5px solid #39d7ff; border-radius: 12px 12px 3px 3px; }
.feature-service::before { left: 8px; top: 8px; width: 16px; height: 16px; border: 1.5px solid #39d7ff; border-radius: 50%; }
.feature-service::after { left: 15px; top: 11px; width: 2px; height: 10px; background: #39d7ff; box-shadow: -4px 4px 0 -0.3px #39d7ff, 4px 4px 0 -0.3px #39d7ff; }
.community-features span { display: flex; min-width: 0; flex-direction: column; }
.community-features strong { font-size: 13px; }
.community-features small { margin-top: 5px; color: #7990b0; font-size: 10px; }
.community-actions { margin-top: 28px; display: flex; align-items: center; gap: 22px; }
.community-actions > a:last-child { color: #a9bdd8; font-size: 12px; }
.community-actions > a:last-child:hover { color: #42dfff; }
.community-service-strip { width: min(1280px, 100%); margin: 18px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d5dfed; background: #fff; }
.community-service-strip article { padding: 21px 24px; display: grid; grid-template-columns: 30px 1fr; gap: 3px 8px; border-right: 1px solid #dfe6f0; }
.community-service-strip article:last-child { border: 0; }
.community-service-strip span { grid-row: 1 / 3; color: #315cff; font: 700 11px Arial, sans-serif; }
.community-service-strip strong { font-size: 14px; }
.community-service-strip small { color: #7a879a; font-size: 10px; }
@media (max-width: 1100px) { .community-showcase { grid-template-columns: 1fr; } .community-image { min-height: 430px; } .community-image::after { background: linear-gradient(0deg, #071a38 0%, transparent 52%); } .community-service-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .community-image { min-height: 350px; } .community-image > div { width: 86px; height: 86px; padding: 14px; } .community-image b { font-size: 29px; } .community-copy { padding: 38px 25px; } .community-copy > h3 { font-size: 26px; } .community-features { grid-template-columns: 1fr; } .community-actions { align-items: stretch; flex-direction: column; } .community-service-strip { grid-template-columns: 1fr; } .community-service-strip article { border-right: 0; border-bottom: 1px solid #dfe6f0; } }