.not-found-page { display: grid; place-items: center; min-height: calc(100vh - 220px); padding: 70px 18px; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.55), transparent 42%); }
.not-found-card { position: relative; width: min(100%, 620px); padding: 48px 34px 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 24px 55px rgba(48,79,58,.14), inset 0 1px rgba(255,255,255,.8); text-align: center; backdrop-filter: blur(12px); animation: not-found-in .5s ease both; }
.not-found-card::after { content: '404'; position: absolute; right: -12px; bottom: -48px; color: rgba(79,121,92,.07); font-size: 12rem; font-weight: 800; line-height: 1; pointer-events: none; }
.not-found-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 21px; background: linear-gradient(135deg,#315d4d,#6f956e); color: #fff; font-size: 1.75rem; box-shadow: 0 12px 22px rgba(48,79,58,.2); }
.not-found-code { position: relative; z-index: 1; color: #4f795c; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.not-found-card h1 { position: relative; z-index: 1; margin: 10px auto 14px; max-width: 480px; color: #294a38; font-size: clamp(1.7rem,4vw,2.35rem); letter-spacing: -.04em; }
.not-found-card p { position: relative; z-index: 1; max-width: 470px; margin: 0 auto 28px; color: #6b7c70; font-size: 1rem; line-height: 1.6; }
.not-found-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 12px 21px; border-radius: 10px; background: linear-gradient(120deg,#3d6e4c,#5b8964); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 9px 18px rgba(53,105,68,.22); transition: transform .2s, box-shadow .2s, background .2s; }
.not-found-button:hover { background: linear-gradient(120deg,#365f43,#527e5a); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(53,105,68,.28); }
@keyframes not-found-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575px) { .not-found-page { min-height: calc(100vh - 190px); padding: 42px 14px; } .not-found-card { padding: 36px 20px 32px; border-radius: 20px; } .not-found-card h1 { font-size: 1.65rem; } .not-found-card p { font-size: .94rem; } }