:root {
      --dark:        #13544E;
      --heading:     #095D40;
      --accent:      #6C9A40;
      --cta:         #008060;
      --lime:        #D3E162;
      --lime-light:  #E4F577;
      --bg:          #FBF7ED;
      --bg-alt:      #E0EDD4;
      --navy:        #212B36;
      --muted:       #637381;
      --white:       #FFFFFF;
      --shadow-sm:   0 2px 12px rgba(0,0,0,0.07);
      --shadow-md:   0 8px 32px rgba(0,0,0,0.11);
      --r-sm:        8px;
      --r-md:        16px;
      --r-lg:        24px;
      --r-xl:        32px;
      --font-body:   'Inter', sans-serif;
      --font-display:'Nunito', sans-serif;
      --ease:        all 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; height: 100%; }
    body {
      font-family: var(--font-body); background: var(--bg);
      color: var(--navy); line-height: 1.65; -webkit-font-smoothing: antialiased;
      min-height: 100vh; display: flex; flex-direction: column;
    }
    a { text-decoration: none; color: inherit; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px; border-radius: var(--r-sm);
      font-weight: 700; font-size: 15px; font-family: var(--font-body);
      transition: var(--ease); white-space: nowrap; cursor: pointer; border: none;
    }
    .btn--primary { background: var(--cta); color: var(--white); }
    .btn--primary:hover { background: var(--heading); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,128,96,0.3); }
    .btn--outline  { background: transparent; color: var(--cta); border: 2px solid var(--cta); }
    .btn--outline:hover  { background: var(--cta); color: var(--white); transform: translateY(-2px); }
    .btn--lg { padding: 16px 32px; font-size: 16px; }

    /* ── Nav ── */
    .err-nav {
      background: var(--white); border-bottom: 1px solid var(--bg-alt);
      padding: 16px 0;
    }
    .err-nav__inner { display: flex; align-items: center; justify-content: space-between; }
    .err-nav__logo img { width: 160px; height: auto; }
    .err-nav__back {
      font-size: 14px; font-weight: 600; color: var(--muted);
      display: flex; align-items: center; gap: 6px; transition: var(--ease);
    }
    .err-nav__back:hover { color: var(--cta); gap: 10px; }

    /* ── Main ── */
    .err-main {
      flex: 1; display: flex; align-items: center; justify-content: center;
      padding: 60px 24px; position: relative; overflow: hidden;
    }
    /* Background blobs */
    .err-main__blob {
      position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.07; pointer-events: none;
    }
    .err-main__blob--1 { width: 600px; height: 600px; background: var(--cta); top: -200px; right: -200px; }
    .err-main__blob--2 { width: 400px; height: 400px; background: var(--lime); bottom: -100px; left: -100px; }
    /* Grid overlay */
    .err-main::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(var(--bg-alt) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-alt) 1px, transparent 1px);
      background-size: 60px 60px; opacity: 0.5;
    }

    .err-inner {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; text-align: center;
      max-width: 680px; width: 100%;
    }

    /* ── Giant 404 ── */
    .err-num {
      font-family: var(--font-display); font-size: clamp(100px, 20vw, 200px);
      font-weight: 900; line-height: 1; letter-spacing: -4px;
      position: relative; user-select: none; margin-bottom: -10px;
    }
    .err-num__4a,
    .err-num__4b { color: var(--heading); display: inline-block; }
    .err-num__0  {
      display: inline-block; color: transparent;
      -webkit-text-stroke: 4px var(--cta);
      position: relative;
      animation: spin0 6s ease-in-out infinite;
    }
    @keyframes spin0 {
      0%, 100% { transform: scale(1) rotate(0deg); }
      25%  { transform: scale(1.04) rotate(-4deg); }
      75%  { transform: scale(1.04) rotate(4deg); }
    }
    /* Lime dot decoration on the 0 */
    .err-num__0::after {
      content: ''; position: absolute;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--lime); top: 18%; right: 15%;
      animation: dot-bounce 6s ease-in-out infinite;
    }
    @keyframes dot-bounce {
      0%, 100% { transform: translateY(0); }
      50%  { transform: translateY(-10px); }
    }

    /* ── Icon ── */
    .err-icon-wrap {
      width: 80px; height: 80px; border-radius: 50%;
      background: var(--bg-alt); border: 3px solid var(--bg-alt);
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; color: var(--muted); margin-bottom: 24px;
      animation: wobble 3s ease-in-out infinite;
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(-5deg); }
      50%  { transform: rotate(5deg); }
    }

    /* ── Text ── */
    .err-title {
      font-family: var(--font-display); font-size: clamp(24px, 4vw, 40px);
      font-weight: 900; color: var(--heading); margin-bottom: 14px; line-height: 1.2;
    }
    .err-title span { color: var(--cta); }
    .err-sub {
      font-size: 17px; color: var(--muted); margin-bottom: 36px;
      line-height: 1.75; max-width: 500px;
    }

    /* ── Actions ── */
    .err-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }

    /* ── Search bar ── */
    .err-search {
      width: 100%; max-width: 480px; margin-bottom: 48px;
      display: flex; border-radius: var(--r-sm); overflow: hidden;
      border: 2px solid var(--bg-alt); background: var(--white);
      transition: var(--ease);
    }
    .err-search:focus-within { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(0,128,96,0.1); }
    .err-search input {
      flex: 1; padding: 14px 18px; border: none; outline: none;
      font-family: var(--font-body); font-size: 15px; background: transparent; color: var(--navy);
    }
    .err-search input::placeholder { color: var(--muted); }
    .err-search button {
      padding: 0 20px; background: var(--cta); color: var(--white); border: none;
      font-size: 16px; cursor: pointer; transition: var(--ease);
    }
    .err-search button:hover { background: var(--heading); }

    /* ── Quick links ── */
    .err-links { width: 100%; }
    .err-links__label {
      font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 16px; text-align: center;
    }
    .err-links__grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .err-link-card {
      background: var(--white); border-radius: var(--r-md); border: 1px solid var(--bg-alt);
      padding: 18px 16px; display: flex; align-items: center; gap: 12px;
      transition: var(--ease); cursor: pointer;
    }
    .err-link-card:hover { border-color: var(--cta); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
    .err-link-card__icon {
      width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
      background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--cta); transition: var(--ease);
    }
    .err-link-card:hover .err-link-card__icon { background: var(--cta); color: var(--white); }
    .err-link-card__title { font-weight: 700; color: var(--heading); font-size: 13px; }
    .err-link-card__sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

    /* ── Footer ── */
    .err-footer { background: #1a2332; padding: 24px 0; }
    .err-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .err-footer__copy  { font-size: 13px; color: rgba(255,255,255,0.4); }
    .err-footer__links { display: flex; gap: 20px; }
    .err-footer__links a { font-size: 13px; color: rgba(255,255,255,0.4); transition: var(--ease); }
    .err-footer__links a:hover { color: var(--lime); }

    /* ── Responsive ── */
    @media (max-width: 640px) {
      .err-links__grid { grid-template-columns: 1fr 1fr; }
      .err-actions { flex-direction: column; width: 100%; }
      .err-actions .btn { width: 100%; justify-content: center; }
      .err-num { letter-spacing: -2px; }
      .err-footer__inner { flex-direction: column; text-align: center; }
      .err-footer__links { justify-content: center; flex-wrap: wrap; }
    }
    @media (max-width: 400px) {
      .err-links__grid { grid-template-columns: 1fr; }
    }