:root{
  --bg:#000000;
  --bg2:#000000;
  --text:#f4f4f0;
  --muted:#9aa098;
  --muted2:#666c67;
  --accent:#819e2e;
  --accent-soft:#a9c85a;
  --accent-dark:#46541d;
  --panel:rgba(18,19,20,.72);
  --shadow:rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html,body{margin:0;min-width:100%;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:'Vazirmatn',Tahoma,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

.error-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:0 42px 54px;
  background:
    radial-gradient(55% 38% at 50% 31%,rgba(125,148,51,.105),transparent 64%),
    radial-gradient(32% 44% at 4% 10%,rgba(125,148,51,.07),transparent 74%),
    radial-gradient(28% 42% at 98% 45%,rgba(125,148,51,.06),transparent 76%),
    linear-gradient(#000000,#000000);
  isolation:isolate;
}

.error-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 23%,transparent 77%,rgba(0,0,0,.26));
}

.ambient{position:absolute;pointer-events:none;filter:blur(70px);opacity:.55;border-radius:999px;z-index:-1}
.ambient--left{width:360px;height:360px;left:-190px;top:60px;background:rgba(129,158,46,.12)}
.ambient--right{width:360px;height:360px;right:-210px;top:290px;background:rgba(129,158,46,.08)}

.tech-grid{
  position:absolute;
  z-index:-2;
  width:min(950px,80vw);
  height:500px;
  left:50%;
  top:245px;
  transform:translateX(-50%) perspective(560px) rotateX(66deg);
  transform-origin:center top;
  opacity:.22;
  background-image:
    linear-gradient(rgba(168,196,82,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,196,82,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at center,#000 8%,transparent 68%);
}

.tech-mesh--left{
  position:absolute;
  left:-80px;
  top:102px;
  width:420px;
  height:300px;
  z-index:-1;
  pointer-events:none;
  opacity:.17;
  transform:skewY(-8deg) rotate(-6deg);
  background-image:
    linear-gradient(18deg,transparent 48%,rgba(153,181,69,.30) 49%,transparent 50%),
    linear-gradient(92deg,transparent 48%,rgba(153,181,69,.17) 49%,transparent 50%);
  background-size:32px 32px,36px 36px;
  mask-image:radial-gradient(ellipse at 42% 44%,#000,transparent 69%);
}

.topbar{
  position:relative;
  z-index:5;
  max-width:1360px;
  height:82px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  direction:ltr;
  font-size:13px;
}

.topbar__nav{display:flex;align-items:center;gap:42px;direction:rtl;color:#e3e6df;font-weight:600;white-space:nowrap}
.topbar__nav a{transition:color .18s ease,opacity .18s ease;opacity:.88}
.topbar__nav a:hover{color:var(--accent-soft);opacity:1}
.topbar__side{display:flex;align-items:center;gap:28px}
.topbar__side--left{justify-self:start;direction:ltr}
.topbar__side--right{justify-self:end;direction:rtl}

.login-link{
  min-width:112px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 19px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  color:#eff1ed;
  background:rgba(255,255,255,.015);
  transition:.18s ease;
}
.login-link:hover{border-color:rgba(169,200,90,.55);background:rgba(129,158,46,.05)}

.language-link{display:inline-flex;align-items:center;gap:9px;color:#e5e8e2;direction:ltr}
.language-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.language-link .chevron{width:13px;height:13px;stroke-width:1.8}

.system-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 17px;
  border-radius:999px;
  background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:#e4e6e1;
  font-size:12px;
  white-space:nowrap;
}
.system-status i{width:9px;height:9px;border-radius:50%;background:#acc92e;box-shadow:0 0 13px rgba(172,201,46,.72)}

.hero-404{
  width:min(980px,100%);
  margin:10px auto 0;
  text-align:center;
  position:relative;
  z-index:2;
}

.brand{display:inline-flex;align-items:center;justify-content:center;gap:10px;direction:ltr;margin-top:4px}
.brand__mark{width:34px;height:34px;display:block;filter:drop-shadow(0 6px 16px rgba(129,158,46,.14))}
.brand__mark svg{width:100%;height:100%;fill:var(--accent)}
.brand__name{font-family:Arial,sans-serif;font-size:25px;font-weight:700;letter-spacing:-.7px;color:#f5f5f2}
.brand__tagline{margin:7px 0 0;color:#b2b6af;font-size:12px;font-weight:400}

.number-scene{height:270px;position:relative;margin-top:20px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.error-number{
  position:relative;
  z-index:2;
  direction:ltr;
  font-family:Arial Black,Arial,sans-serif;
  font-size:clamp(150px,18vw,225px);
  line-height:.86;
  font-weight:900;
  letter-spacing:-18px;
  padding-right:18px;
  color:transparent;
  background:linear-gradient(180deg,#77784b 0%,#4f502c 42%,#28291d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.42));
  text-shadow:0 1px 0 rgba(210,218,136,.18);
}
.error-number::before{
  content:"404";
  position:absolute;
  inset:0;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(185,194,112,.22);
  filter:blur(.1px);
}

.orbit{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);border:1px solid rgba(157,182,71,.26);border-radius:50%;z-index:1}
.orbit--one{width:650px;height:114px;transform:translate(-50%,-50%) rotate(-2deg)}
.orbit--two{width:520px;height:82px;border-color:rgba(157,182,71,.10);transform:translate(-50%,-50%) rotate(5deg)}
.particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#b9d52c;box-shadow:0 0 15px 3px rgba(185,213,44,.42);z-index:3}
.particle--one{left:17%;top:48%}
.particle--two{right:18%;top:61%;width:4px;height:4px}
.particle--three{right:8%;top:19%;width:3px;height:3px;opacity:.55}

.hero-404 h1{margin:10px 0 0;font-size:clamp(34px,4vw,48px);line-height:1.35;font-weight:900;letter-spacing:-1.8px;color:#fafbf8;text-shadow:0 12px 30px rgba(0,0,0,.35)}
.error-copy{margin:20px auto 0;max-width:650px;color:#aeb3ad;font-size:14px;line-height:2;font-weight:400}

.requested-path{
  width:min(470px,100%);
  height:58px;
  margin:25px auto 0;
  padding:0 13px 0 18px;
  display:flex;
  align-items:center;
  gap:14px;
  direction:rtl;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(28,29,30,.76),rgba(15,16,17,.86));
  box-shadow:0 16px 36px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025);
}
.requested-path__label{font-size:12px;color:#aeb1ac;white-space:nowrap}
.requested-path code{margin-inline-start:auto;color:#9eb639;font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.requested-path__icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.055);color:#f0f1ed;font:700 13px/1 ui-monospace,monospace;direction:ltr}

.actions{width:min(520px,100%);margin:22px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.action{height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:14px;font-weight:600;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.action:hover{transform:translateY(-2px)}
.action--primary{color:#fafcf4;background:linear-gradient(180deg, #46541d 0%, #46541d 100%);}
.action--secondary{color:#d8ddd5;background:rgba(15,16,17,.72);box-shadow:inset 0 0 0 1px rgba(129,158,46,.33),0 11px 30px rgba(0,0,0,.14)}
.action--secondary:hover{background:rgba(129,158,46,.055)}

.help-strip{
  width:min(620px,100%);
  min-height:92px;
  margin:34px auto 0;
  padding:17px 27px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  background:linear-gradient(180deg,rgba(22,23,24,.70),rgba(12,13,14,.80));
  box-shadow:0 18px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
  text-align:right;
}
.help-strip__search{flex:0 0 50px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(129,158,46,.09);color:#9ab328}
.help-strip__search svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.help-strip__copy{display:flex;flex-direction:column;gap:5px}
.help-strip__copy strong{font-size:15px;font-weight:700;color:#f1f2ef}
.help-strip__copy small{font-size:12px;color:#858b85}

.features{
  width:min(1000px,94vw);
  margin:31px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  direction:rtl;
}
.feature{min-width:0;display:flex;align-items:flex-start;gap:13px;text-align:right}
.feature__icon{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(129,158,46,.085);color:#99b628;box-shadow:0 0 22px rgba(129,158,46,.07)}
.feature__icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.feature div{min-width:0;display:flex;flex-direction:column;gap:5px}
.feature strong{font-size:12px;font-weight:700;color:#e5e7e1;white-space:nowrap}
.feature small{font-size:10px;line-height:1.75;color:#747a75;white-space:nowrap}

@media (max-width:1000px){
  .topbar__nav{gap:22px}
  .features{grid-template-columns:repeat(2,1fr);max-width:650px;row-gap:22px}
  .number-scene{height:245px}
  .orbit--one{width:min(650px,80vw)}
  .orbit--two{width:min(520px,68vw)}
}

@media (max-width:760px){
  .error-page{padding:0 18px 38px}
  .topbar{height:72px;grid-template-columns:1fr 1fr}
  .topbar__nav{display:none}
  .topbar__side--right{grid-column:2;grid-row:1}
  .topbar__side--left{grid-column:1;grid-row:1;gap:15px}
  .login-link{min-width:auto;height:38px;padding:0 14px;font-size:11px}
  .language-link{font-size:11px}
  .hero-404{margin-top:15px}
  .brand__name{font-size:21px}
  .brand__tagline{font-size:10.5px}
  .number-scene{height:220px;margin-top:12px}
  .error-number{font-size:clamp(130px,42vw,190px);letter-spacing:-14px}
  .hero-404 h1{font-size:34px}
  .error-copy{font-size:12.5px;line-height:1.9}
  .requested-path{height:54px}
  .actions{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr;width:min(540px,100%);gap:20px 16px}
  .feature{gap:9px}
}

@media (max-width:520px){
  .system-status{padding:0 12px;font-size:10px}
  .system-status i{width:7px;height:7px}
  .language-link span{display:none}
  .number-scene{height:190px}
  .error-number{font-size:128px}
  .orbit--one{width:110vw;height:82px}
  .orbit--two{width:88vw;height:58px}
  .particle--one{left:7%}.particle--two{right:7%}
  .hero-404 h1{font-size:29px}
  .error-copy br{display:none}
  .requested-path{padding:0 10px;gap:9px}
  .requested-path__label{font-size:10px}
  .requested-path code{font-size:10px}
  .requested-path__icon{width:33px;height:33px}
  .help-strip{padding:15px;min-height:82px}
  .help-strip__search{flex-basis:42px;width:42px;height:42px}
  .help-strip__copy strong{font-size:13px}
  .help-strip__copy small{font-size:10.5px}
  .features{grid-template-columns:1fr;margin-top:26px}
  .feature{justify-content:center;text-align:right}
  .feature div{width:170px}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}